Best practices for building accessible React apps

  • Characteristics of Good design
  • Why is Accessibility important?
  • Web Accessibility standards
  • Checklist for building accessible apps
  • Accessibility tools and library

Characteristics of Good design

  • Clear, Simple and Consistent workflow
  • Good color theming
  • Good error/exception handling
  • Every user feels comfortable using the app (Accessible to everyone)
  • Responsiveness

Why is Accessibility important?

  • Visual (Blindness, Low vision, Color blindness)
  • Cognitive (Dyslexia, Development disabilities)
  • Seizures
  • Auditory (Deafness, Hearing impairments)
  • Motor (tremors, Muscle slowness etc.)
  • The accessibility guidelines promote writing semantic HTML which in turn boosts SEO (Search Engine Optimization) for your website.
  • Your product can also comply with Government laws.

Web Accessibility standards

Perceivable (By everyone)

Operable (Accessible with both keyboard and mouse)

Understandable

Robust — App works well in current and future user tools (Technologies and devices within reasonable limits)

  • A: Essential
  • AA: Ideal Support
  • AAA: Specialized support

Checklist for building accessible apps

Root HTML tag with lang attribute

<html lang="en">    <!-- content --></html>

Unique title for every page

Keyboard navigation

  • A tabindex of 0allows elements other than links and form elements to receive keyboard focus. These DOM elements receive focus in the order they are arranged in DOM. This tabindex value is handy when you want to make elements like div or li to be accessible with the tab key.
  • A tabindex of -1 means an element is not accessible via sequential keyboard navigation but could be focussed with Javascript or using the mouse.
  • Avoid using a positive value of tabindex because this value determines the order in which the element would be accessed while pressing the tab key. If an element down the page is set with a higher tabindex, it will receive focus before the one at the top of the DOM tree. It creates confusions and must be avoided

Writing semantic HTML

.visually-hidden {
position:absolute;
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
white-space: nowrap;
word-wrap: normal;
}
  • Every input or textarea must have a label tag or an aria-label attribute associated with it for screen readers to read the inputs.
  • The input element should have both required and aria-required attributes for the required fields and there should also be a visual indication to imply it.
  • Invalid inputs must have an aria-invalid attribute when it is invalid.
  • Use aria-describedby to provide instructions for controls. For example, if your input element should provide the date in a specific format, then the code should provide the instruction as follows:
  • The validation errors should always be mapped to the field it describes so that the assistive devices can read the information when an error is encountered. aria-describedby can be used in conjunction with role='alert' to denote errors.

Accessibility tools and library

Static analysis tools

Libraries for React components

  • @axe-core/react allows you to test accessibility at runtime. You can run axe in the development environment like below.
if (process.env.NODE_ENV !== "production") {   const axe = require("@axe-core/react");   axe(React, ReactDOM, 1000);}
  • jest-axe can be used with both Enzyme and @testing-library/react. But, I highly recommend using @testing-library/react over Enzyme.
  • cypress-axe can be used to test Accessibility in the entire application for different user actions

Extensions

Conclusion

--

--

--

Fullstack developer at Unite

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Modern Monolith: The Browser

TryHackMe Jason Writeup

Day 14: Become a self-taught blockchain developer with zero knowledge in 365 days

Let’s talk about “console.log”

An Introduction to React Hooks

Angular Bundle Size Optimization

How to handle 404, 500 and more — using `fetch()`API in JavaScript

Building D3 interactive network graph D3 Force-Simulation + React + TypeScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aishwaryalakshmi Panneerselvam

Aishwaryalakshmi Panneerselvam

Fullstack developer at Unite

More from Medium

Designing Accessible Components for Web

Building a simple and reusable Radio Group component with React

Build and Share React UI Components between Projects using Material UI and Storybook Part-2

How to persist custom Material UI theme using Redux Toolkit and Local Storage in React

How to persist custom material UI theme using Redux toolkit and react