Skip to main content
Design system

Automated testing tools

Useful for catching some (but not all) issues


Intro

Automated testing is generally believed to catch around 30-50 percent of accessibility issues on a page. They are a useful tool in achieving accessibility, but they are not sufficient for full testing. Below are some automated testing tools that we use at The Post.


WAVE Evaluation Tool (Google Chrome extension)

WebAIM's WAVE Evaluation Tool extension provides an interactive testing suite that is a good starting point for automated accessibility testing. There is a video guide to using WAVE, but we'll go over the basics here as well.

After installing, select the puzzle piece icon in the top right of the Chrome browser and select the tool from the dropdown, as shown below.

Screenshot shows The Washington Post homepage with the Chrome browser extensions menu open in the top right corner of the browser. The WAVE Evaluation Tool is highlighted in the menu as the user has it in focus.

Selecting the tool will open a menu if errors, alerts and other notices on the page. The interactive visual experience makes WAVE helpful for beginners.

Screenshot shows The Washington Post homepage with the The WAVE Evaluation Tool menu open on the left side of the screen. The menu lists a summary of errors, alerts and other notices on the page, and the homepage itself has colorful icons sprinkled throughout it to show where the tool's audit flagged things that can be viewed in more detail.

Click on the icons that appear throughout the page to understand what each is signaling.

WAVE should always be used alongside the axe DevTools described below. Don't rely on only one tool or the either. Use both.


axe DevTools (Google Chrome extension)

Install the axe DevTools extension. There is a video guide to using the axe DevTools, but we'll go over the basics here as well.

To test a page with the axe DevTools, open the developer tools in Chrome and select axe DevTools in the console dropdown, as shown below.

Screenshot shows the Chrome dev tools menu open to the right of The Washington Post homepage. In the Chrome dev tools' 'More tabs' dropdown menu, the axe DevTools extension is highlighted as the user has it in focus.

Once in the axe DevTools menu, you can select "scan ALL of my page."

Screenshot shows the axe DevTools menu open to the right of The Post's homepage. In the axe DevTools menu, 'Scan ALL of my page' is highlighted as the user has it in focus.

Finally, you will receive a list of errors on the page that you can expand to view. You can even see where in the page HTML the error occurs. This is very useful for catching and fixing issues.

Screenshot shows the axe DevTools menu open to the right of The Post's homepage. In the axe DevTools menu, the results of full page scan are shown. A total of 45 issues were flagged, and the details of the first issue are expanded below the total.


axe-core testing library

In addition to the Chrome extension, the axe testing suite is available in a set of npm packages so that you can configure the tests to run automatically.

Each package has more details in its README on how the package is used.

We also recommend jext-axe for unit testing, though it is not part of the axe-core library.


Linting with jsx-a11y

Pair the axe-core npm packages with the eslint-plugin-jsx-a11y npm package to improve your automated testing.

Per the package's developers: "This plugin does a static evaluation of the JSX to spot accessibility issues in React apps. Because it only catches errors in static code, use it in combination with @axe-core/react to test the accessibility of the rendered DOM. Consider these tools just as one step of a larger a11y testing process and always test your apps with assistive technology."

The jsx-a11y developers provide a list of everything covered by jsx-a11y's automated checks.


Storybook automated tests

Storybook is a valuable tool for viewing your components in isolation and conducting testing.

We recommend reading the Storybook accessibility docs for more information.

Edit this page on GitHub.