Jump to main content

Automated accessibility testing with jest and axe

Automated accessibility testing is an easy and cheap way of doing accessibility testing. The idea is to be able to do the testing as a build step or while developing. That way the problems can be identified at the moment they are introduced. Even if automated testing is convenient and effective you must have in mind that it won't discover every issue. Or more likely, not even half. Automated testing doesn't replace manual or user testing, but it complements it.

When the developers at GOV.UK tested a bunch of different tools they found that the best found at most 40% of the accessibility issues.

Here is an demonstration of how to do automated accessibility testing with the following tools:

I will not do a full walk through of how to set everything up. You can read more about that on the libraries websites. You can also use Create React App and you will get everything set up for you.

If you have started with Create React App you'll have React, Jest and React testing library already set up and you'll just need to install the jest-axe package:

npm install -D jest-axe

Then you can write a simple test like this for each of your component, and you will be notified of any accessibility issue that Axe can pick up:

import React from 'react';
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import MyComponent from './MyComponent';
expect.extend(toHaveNoViolations);

describe('MyComponent', () => {
	it('should not have any accessibility issues', async () => {
		const { container } = render(<MyComponent />);
		const results = await axe(container);
		expect(results).toHaveNoViolations();
	});
});

This is a simple way to get started with accessibility testing and can be a good first step towards a more accessible website!

Read more / sources: