Debunking the Myth: Accessibility and React
However, React has also developed a stigma within the accessibility community that web applications created in React are not accessible. Lots of accessibility advocates, and even developers who develop in the framework, think that accessibility is a very big challenge that can be almost impossible to achieve. Some of these issues include:
- One generic page title that cannot change
- Focus management makes applications impossible to navigate with the keyboard
- Extra added <div> and wrappers can break semantics
- Using semantic HTML is hard to achieve
The list goes on and on, and although all of these are very valid concerns from an accessibility perspective, these are all challenges that can be overcome within the framework itself.
The best way to remedy all of the above stigmas and concerns is to create an awareness that React does, in fact, have a lot of accessibility that is built into the framework, and that it also has a large community of accessible add-ons that can help you achieve accessible components. Here are some tips and tricks that can help you achieve the most accessible React application possible!
Use Semantic HTML
This one may be pretty obvious, however, there is still React content that does not use semantic HTML to create basic elements on the page. Instead of creating a button with <div> and <span>, use the <button> tags that have inherent meaning for assistive technology. The more semantics you can use in your application, the easier it will be on you (the developer) and the assistive technology user.
Take Advantage Component Life Cycles
Example use case of using lifecycle to set focus on load:
Use Fragments Where Appropriate
One often-forgotten feature in React is having to add in an extra container to surround your content. This may seem like just a best practice, however, this can cause semantic accessibility issues if you have multiple elements in the same render() function or you are injecting component into another semantic HTML tag. The best way to make sure that the markup you have is rendered properly in the DOM is to use React Fragments. Fragments let you group HTML elements together without adding any extra nodes to the DOM.
Example use case where data is being injected into a table, and fragment must be used to not break table semantics:
Check Your Add-Ons for Accessibility
Node and yarn packages can make life so much easier as a developer. However, a lot of the packages that are in use are inaccessible. If you choose to use the package, and it has HTML markup that is inaccessible, you are responsible for that content! It’s easy enough to check packages for accessibility, and if need be, make changes in it to make it accessible or simply find another package that is accessible.
Take Advantage of Title Package and Services
Be sure that whenever your view changes (i.e. moves to a new page) that the title is changing as well. Although this is seen as difficult, React makes it easy by having multiple different packages (such as React Document Title) that let you dynamically set the title when the view changes.
Example use of Document title service in a page component:
<DocumentTitle title="React Accessibility Example" />
You can also change the title in the life cycle of the component using didComponentMount() and calling document.title=”your title”.
Use Automation to Test Your Components
This is the big one. When possible, use automation in your component unit test cases to check for accessibility issues. Using a tool such as axe-core to integrate into your unit test cases can help catch up to 50% of accessibility violations. The more you test, the more likely the content you have will be accessible!
React can be an accessible application framework with the right knowledge and the right know-how. The stigma that it is not an accessible framework is simply not true. It has some of the best built-in accessibility functionality there is out there, and a large community of accessibility advocates that are creating content that is easily consumable in your application.