Accessibility in React

When we are creating web apps we should think of all our users. Everyone does not have perfect eyesight or normal motor functions. Depending where you are you might even have to accommodate for these users by law. I feel like it is our responsibilty as developers to make sure that everyone are able to use our React apps.

Use semantic HTML

The first thing you can do is to make sure your HTML is semantically correct, e.g. use <nav> for navigational elements, <a> for navigation and <buttons> for actions. This makes it easier for screen readers to know what the different elements on a page are supposed to do. It also makes it easier navigating with a keyboard. You can read more on what semantics is and the different HTML elements at MDN

WAI-ARIA in React

Aria-* HTML attributes are fully supported in React and JSX, and unlike other attributes or properties in React which has to be camelCased, aria-attributes are kebab-cased

<button aria-hidden="false" onClick={doSomething}>

Getting feedback in the browser

There are of course some tools to help you get started. First of all there is an offical react-a11y module. It identifies and warns you about potential accessibility issues with React elements in your app. Add it to your project with your preferred package manager, then add the following to your main application file

if (process.env.NODE_ENV === 'development') {
    const a11y = require('react-a11y').default;
    a11y(React, ReactDOM, {
        rules: {
            'img-uses-alt': 'warn',
            'img-redundant-alt': ['warn', ['image', 'photo']]
            'onclick-uses-role': 'warn',
            // ... add additional rules here
        }
    });
}

What next? Start your app and open the console in your browser and you might get a warning like this:

You have a click handler on a non-interactive element but no `role` DOM property. It will be unclear what this element is supposed to do to a screen-reader user ...

This was provoked by the following div element

<div onClick="{doSomething}">Click me!</div>

To solve this you will either need to add a role, e.g. <div role="button" ... />, or change the element to a <button> for screen readers to understand its purpose. The latter of the two is also the best solution here. There are several rules you can add, some with configurable options. Explore them and use the ones that suits your use case.

Getting feedback while you code

Feedback in the browser console is nice, but it’s a lot more convenient to get it while you write your code. There is of course an eslint plugin for that eslint-plugin-jsx-a11y, and is inteded to use in conjunction with react-a11y. If you’re using Create React App you already have this plugin with some rules already activated.

Explore more

That's just a couple of tools to get you started. Don't forget to have a look at the React docs as well. They have a whole section on accessibility and it's great if you want to know more.

I also recommend visiting the The A11Y Project. They have some great tips and suggestions how to make any site more accessible, but also some test to see how well your site complies, in addition to crush a couple of myths regarding accessibility.

Finally, if you're on Twitter, I recommend you follow Ryan Florence. He's passionate about making React apps accessible for users and developers, and is behind projects like Reach UI and the earlier mentioned react-a11y.