Debunking the Myth: Accessibility and React
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!
Thanks for the write up.
Full disclosure, I am not a React developer – it is on my list, but so are a lot of other things. I have conducted and seen research conducted on a huge number of React services and I can’t recall one that didn’t have a wealth of problems.
I have a slight problem with your perspective and the idea that it is a myth that React has accessibility problems. Just because there are addons and work arounds doesn’t mean that the core framework is not accessible. It isn’t.
While I agree that development teams have a responsibility to ensure there work is accessible, they could have been helped hugely if React was broadly accessible out of the box. This is where I think frameworks, and it is not exclusive to React, are failing and should be called out for that failure until they integrate accessibility by default. The idea that addons and knowledge make it accessible isn’t an excuse for a high level of accessibility in the core.
The core framework should be working hard to help developers build accessibility in by default. And I can’t see how it is.
Excellent article – at the end of the day, React is just a UI framework and does not really have much of an opinion with regards to *what* you build. React applications often have accessibility problems not because of any flaw in its design. On the contrary – it empowers developers to create extremely complex UI interactions that were previously much more challenging to achieve with DOM manipulation libraries like jQuery. This unfortunately means that in the aggregate, React applications tend to be less accessible than their jQuery ancestors!
There are some signs of improvement when it comes to tooling. For example, most React developers get started with Create React App (https://github.com/facebook/create-react-app) which comes bundled with a powerful accessibility linting library that warns developers of common pitfalls like adding click handlers on semantically inappropriate elements. To give another example, React Router is in the process of incorporating some of the great focus handling of its cousin, Reach Router.
Thanks for this post.
I work with React, and most of what is done is actually not accessible, I agree. But as you say, it’s more on the developer than on the framework.
The very first thing is the accessibility knowledge of the developer. Usually, it just doesn’t exist.
Take a developer who really knows and uses HTML as it should be (a button for a button, document structure, etc.), if he knows about implementing accessibility features, React is absolutely not a problem.
And “I don’t have the time” is not an excuse. Accessibility is kind of built-in HTML, we keep breaking it through back practice.
I could show to my team mates that we could go from an absolutely non-accessible login page to a fully accessible page in a couple of hours and they were astonished. Not by my speed, but just by the amount and nature of errors there were in this login page. They just didn’t know that what was done was bad.
React is as accessible as any framework. Everything is on the developer.
@Kevin White
I’m not quite sure you understand how react works overall, it just gives you a way to compose views through the use of components. By default react doesn’t supply any of these components to you, developers need to build them (at least on the web, react native is another story).
Those components can be shared through npm though, and I’ll admit quite a few of them are not accessible by default, but that’s 100% a developer issue and not react.
React definitely gives you the tools to write accessible code within components. I’ve been doing it for a couple years now. I find it’s actually easier to make things accessible in react, compared to just vanilla JavaScript, since using state within components gives you easy ways to manage different aria attributes. They also give you ways to break out of “react world” and get references directly to elements, allowing you to manage focus events for a11y purposes.
From my point of view the problem is more on the developer education side. Maybe that’s where the react ecosystem could help (if they don’t already?) with supplying resources for developers to learn about accessibility and writing accessible code. It only took me a year (maybe?) to become pretty proficient in accessibly concerns, and that was just from researching accessible code and reading lots of articles online. Learning how to use a screen reader helps as well, gives you a whole new perspective on how many people actually interact with the web.
On the bright side, if you look, you can definitely find developers writing accessible code and I’m really happy to see that. Any of the accessible react components made by David Clark are great, for example: https://github.com/davidtheclark
All great points made by everyone!
With the recent push to make JavaScript frameworks accessible, React is actually one of the first JavaScript frameworks to start to include accessibility within the framework itself. Currently they have some accessibility features being added directly into the framework which is a great step forward.
But even with that, it will still more than likely always come down to a developer being conscious of accessibility, using some add-ons features, and making accessible markup in the components they write. This will make it so the applications created are the most accessible they can be!
Also, for titles, I wanted to throw in React Helmet which allows you to change titles, descriptions, and any meta tags github.com/nfl/react-helmet