JavaScript frameworks are becoming the norm for creating powerful, fast, and adaptive web sites. One of the most popular frameworks is React. React has risen in popularity over the last few years at an unbelievable rate. With the ability to create reusable components, a virtual DOM, and a massive support community behind it, React has advantages that are seemingly limitless.
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
The component life cycle in React allows you to tap into multiple functions during mounting and updating that can help with accessibility. For example, when a specific component is mounted on your page and you need focus to go to that new component, you can use componentDidMount() function and write JavaScript to put the focus on it. You can also use the componentDidUpdate() function to toggle ARIA states within your component. Using the lifecycle can help with these and many other scenarios to make your content more accessible.
Example use case of using lifecycle to set focus on load:
componentDidMount() {
this.alertText.focus();
}
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:
<Fragment>
<td>{this.props.userName}</td>
<td>{this.props.title}</td>
</Fragment>
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!
In Summary
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.
If we continue to spread knowledge and awareness of the issues that come with JavaScript frameworks like React, and also teach and guide others on how to remediate these issues, there is no limit as to how accessible this framework can be!