Make Your Web App Accessible With the Axe Accessibility Library

Axe is an accessibility testing engine for websites and other HTML-based user interfaces.

Indrek Lasn
Oct 21 · 4 min read
react-axe will show accessibility results in the dev tools

What’s the difference between a great application and an excellent application? Accessibility!

The small things matter. Users want to navigate your application using their keyboards, blind users want to read your blog too, and power users want to use shortcuts, like the tab button, for navigation.

Here’s where the Axe testing library comes handy.

axe-core — https://github.com/dequelabs/axe-core

Axe Accessibility Testing Library Philosophy

The web can only become an accessible, inclusive space if developers are empowered to take responsibility for accessibility testing and accessible coding practices.

Automated accessibility testing is a huge time saver. It doesn’t require special expertise and it allows teams to focus expert resources on the accessibility issues that are most important. Unfortunately, most accessibility tools are meant to be run on sites and applications that have reached the end of the development process and they often don’t give clear or consistent results, causing frustration and delays just when you thought your product was ready to ship.

Axe was built to reflect how web development actually works. It works with all the modern browsers, tools, and testing environments a development team might use. With Axe, accessibility testing can be performed as part of your unit testing, integration testing, browser testing, and any other functional testing your team already performs on a day-to-day basis. Building accessibility testing into the early development process saves time, resources, and all kinds of frustration.


About Axe — Manifesto

  • Axe is an open-source project.

Getting Started With React

react-axe GitHub page — https://github.com/dequelabs/react-axe

Install the module with NPM or Yarn.

NPM:

npm install --save-dev react-axe

Yarn:

yarn add react-axe

Initialize the Module

Call the exported function passing in the React and ReactDOM objects as well as a timing delay in milliseconds that will be observed between each component change and the time the analysis starts.

const React = require('react');
const ReactDOM = require('react-dom');

if (process.env.NODE_ENV !== 'production') {
const axe = require('react-axe');
axe(React, ReactDOM, 1000);
}

Getting Started Without a Framework

First, install the axe-core package.

npm install axe-core --save-dev

Contents of the API Package

The axe-core API package consists of:

  • axe.js - the JavaScript file that should be included in your web site under test (API)

Include the JavaScript file in each of your iframes in your fixtures or test systems.

<script src="node_modules/axe-core/axe.min.js"></script>

Now insert calls at each point in your tests where a new piece of UI becomes visible or exposed:

axe.run(function (err, results) {
if (err) throw err;
ok(results.violations.length === 0, 'Should be no accessibility issues');
// complete the async call
...
});

Run the module in your development environment (as shown in the code above) or your application will use more resources than necessary when in production. You can use envify to do this as is shown in this example.

Once initialized, the module will output accessibility defect information to the Chrome Devtools console every time a component updates.

Now, once you run the React app, the web console should show you any accessibility issues, if any exist.

Axe accessibility errors and warnings

Supported Browsers

The axe-core API fully supports the following browsers:

  • Microsoft Edge v40 and above

Support means that we will fix bugs and attempt to test each browser regularly. Only Firefox, Chrome, and Internet Explorer 11 are currently tested on every pull request.

There is limited support for JSDOM. We will attempt to make all rules compatible with JSDOM but where this is not possible, we recommend turning those rules off. Currently the color-contrast rule is known not to work with JSDOM.

We can only support environments where features are either supported natively or polyfilled correctly. We do not support the deprecated v0 Shadow DOM implementation.


The Accessibility Rules

The complete list of rules run by axe-core can be found in doc/rule-descriptions.md.

axe rules — https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md

Conclusion

Make sure your application is accessible to all users. There are so many people, each with their needs. The more needs you can cater to, the higher the traffic. Take any advantage you can.

Thanks for reading, happy coding!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software Engineer. I try to be kind and friendly. Let’s change the world together for the better. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade