React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to create accessible React apps.

Mouse and Pointer Events

Any functionality that’s exposed through a mouse or pointer event should also be accessible using the keyboard alone.

We should use onBlur and onFocus on buttons, if we’re using them to toggle something on or off.

For example, we should write:

class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { open: false };  
  } 

  handleClick() {  
    this.setState({ open: true });  
  } 

  handleFocus() {  
    this.setState({ open: true });  
  } 

  handleBlur() {  
    setTimeout(() => {  
      this.setState({ open: false });  
    });  
  } 

  render() {  
    return (  
      <div  
        onFocus={this.handleFocus.bind(this)}  
        onBlur={this.handleBlur.bind(this)}  
        aria-expanded={this.state.open}  
      >  
        <button onClick={this.handleClick.bind(this)}>Menu</button>  
        {this.state.open && (  
          <ul>  
            <li>Apple</li>  
            <li>Orange</li>  
            <li>Mengo</li>  
          </ul>  
        )}  
      </div>  
    );  
  }  
}

In the code above, we have the handlers for blur and focus events handlers attached to the wrapper div.

Also, we have the aria-expanded attribute to indicate whether the div has an expanded menu.

When we press the tab button to focus on the button, we can toggle the menu without the mouse. This is what we want since not everyone can use a mouse or another pointing device.

More Complex Widgets

We should put in HTML aria attributes so that our components are accessible to React components.

This is even more important for complex components since they have many parts.

Setting the Language

We should set the language of the page so that screen reader software can use it to set the right voice settings.

Setting the Document Title

The title text should correctly describe the current page so that users are aware of the page’s content.

Color Contrast

Elements should have enough contrast so that they can be readable by viewers with low vision.

We can calculate color combinations with enough contrast by using the Colorable package.

Testing The Keyboard

We should test if everything can navigate to with only the keyboard.

To do this, we can press Tab and Shift+Tab to navigate forward and backward respectively.

Also, we should be able to use the Enter key to activate elements.

Arrow keys should work with menus and dropdowns.

eslint-plugin-jsx-a11y

ESLint has a plugin to check for accessibility issues in JSX code. Many IDE integrate with this directly.

It an NPM package so that we can install it by running:

npm install eslint --save-dev

We can install the package and put in the following to the .eslintrc file of our project as follows:

{  
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],  
  "plugins": ["jsx-a11y"]  
}

Testing Accessibility in the Browser

We can test for accessibility by using the aXe-core package for automated testing of accessibility.

Screen Readers

Screen readers should be able to read the page correctly. Common screen readers include NVDA, VoiceOver, and JAWS.

There’s also a ChromeVox extension for Google Chrome.

Conclusion

There’re many aspects to consider to make React apps accessible. We should set the language, title, and aria attributes correctly.

Also, elements on a page should be accessible via the keyboard.

We can use ESLint plugins and automated testing tools to test accessibility.