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

All companies want their products to reach as many users. The primary factor that one should mainly consider while designing an app is user-friendliness. If an app is easy to use, then the chances to retain or engage the users in the app would be more.

  • 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?

As we have seen above, building accessible apps is a primary characteristic of good design. But what exactly is Accessibility? And the first answer that popup in most of our minds is “Making the app readable with screen readers”. But it’s not just that.

  • 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

Web Content Accessibility Guidelines (WCAG) is a set of recommendations published by the Web Accessibility Initiative (WAI) of W3C to make Web content more accessible for all kinds of people.

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)

There are three levels of accessibility compliance in WCAG 2.1. Each of these levels has a set of guidelines which is catered into three buckets like “Must have, should have and could have”

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

Checklist for building accessible apps

The following is a summary of noteworthy points that one should bear in mind while building a web app.

Root HTML tag with lang attribute

The lang attribute is used to denote the language of the content on the website. It helps search engines to show language-specific results and the screen readers to switch language profiles to provide correct accent and pronunciation.

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

Unique title for every page

The title tag within the head tag should have an appropriate title for every page. The websites should change the title accordingly when users navigate to different pages.

Keyboard navigation

Keyboard navigation is a fundamental characteristic for providing accessibility. Many users with disability use the keyboard to access the UI elements. There are also users without accessibility who prefer the keyboard over the mouse to control elements.

  • 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

Never use <div> for everything. HTML 5 has several useful tags like aside, main, nav, section, header, footer etc. It helps screen readers and also the search engines to effectively crawl and display search results.

.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

Having known the best practices, it is always easier if a tool verifies at least some of these. Let’s look at some of the tools and extensions that offer support.

Static analysis tools

eslint-plugin-jsx-a11y is a static AST checker for accessibility rules on JSX elements. Since static analysis tools cannot check the values that change at runtime, this plugin alone cannot ensure whether a web app is completely compliant with accessibility guidelines.

Libraries for React components

Use some version ofaxe-core to automate A11y testing. The following tools depend on axe-core

  • @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

Deque Axe is also very handy to test accessibility on applications.

Conclusion

Building accessible website is gaining a lot of traction and there are also laws enforcing the importance of accessibility. So, let’s make the web accessible to everyone irrespective of their ability :)

--

--

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