Automatically testing for accessibility (a11y) issues with jest-axe

Max Rozen

Hey, you! Does your project have jest already installed?

Do you wish management would care more about accessibility but just can't get them to invest or pay attention?

A few design systems I've worked with had the following code to prevent app-wide accessibility regressions, and it's so simple yet powerful that I had to share.

import React from 'react';
import { render } from '@testing-library/react`;
import { axe, toHaveNoViolations } from 'jest-axe';
function AccessibleForm() {
return (
<label htmlFor="email">Email</label>
<input id="email" placeholder="email" />
test('accessible forms pass axe', async () => {
const { container } = render(<AccessibleForm />);
expect(await axe(container)).toHaveNoViolations();

Credit to Kent C. Dodds' course for the above snippet

With a few lines of code, auditing your entire design system for accessibility issues suddenly becomes surprisingly doable.

Without @testing-library/react, the code is more or less the same. Using Enzyme, you mount() your component, and pass it to jest-axe to validate.

It's worth noting that while this can find issues with inaccessible HTML, it doesn't guarantee your components are actually accessible. To do that, you'll want to involve actual people with disabilities involved in your research. For more information about jest-axe, see the GitHub repo.

Further reading

Google's actually has a pretty comprehensive article on auditing accessibility at - however it mainly touches on catching issues via eslint or while running the application in development, rather than using your test suite.

Do you struggle to keep up with best practices in React?

I send a single email every two weeks with an article like this one, to help you keep track of what's happening in the React ecosystem.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 1,555 React developers that have signed up so far!