axe-core
Advanced tools
The axe-core npm package is a library for accessibility testing. It allows developers to automatically test their HTML for common accessibility issues using a variety of technologies including JavaScript, React, Angular, Vue, and more. The package can be used in different environments like web browsers, Node.js, and continuous integration systems.
Accessibility testing in browser
This code sample demonstrates how to run accessibility tests on the current document in a web browser. The results are logged to the console.
axe.run(document, function(err, results) {
if (err) throw err;
console.log(results);
});Integration with testing frameworks
This code sample shows how axe-core can be integrated with Jest testing framework using jest-axe to ensure that a rendered HTML snippet is accessible.
const { axe, toHaveNoViolations } = require('jest-axe');
test('ensures .foo element is accessible', async () => {
const render = () => '<div class="foo">bar</div>';
const html = render();
expect(await axe(html)).toHaveNoViolations();
});Command-line accessibility testing
This code sample illustrates how to use axe-core with axe-cli for command-line accessibility testing of a given URL.
const axe = require('axe-core');
const { run } = require('axe-cli');
run(axe, { url: 'http://example.com' }, (err, results) => {
if (err) throw err;
console.log(results);
});Pa11y is an automated accessibility testing tool that runs HTML CodeSniffer from the command line for programmatic accessibility reporting. It is similar to axe-core in that it provides automated testing, but it uses a different engine for its analysis and offers a command-line interface out of the box.
Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more. The accessibility audits are similar to axe-core, but Lighthouse provides a broader range of audits beyond accessibility.
WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can provide visual feedback about the accessibility of your web content by injecting icons and indicators into your page. Unlike axe-core, WAVE is primarily a browser extension and web service.
Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
Sign up for axe news to get the latest on axe features, future releases, and events.
Axe-core has different types of rules, for WCAG 2.0 and 2.1 on level A and AA, as well as a number of best practices that help you identify common accessibility practices like ensuring every page has an h1 heading, and to help you avoid "gotchas" in ARIA like where an ARIA attribute you used will get ignored.
With axe-core, you can find on average 57% of WCAG issues automatically. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed.
To catch bugs earlier in the development cycle we recommend using the axe-linter vscode extension. To improve test coverage even further we recommend the intelligent guided tests in the axe Extension.
The complete list of rules, grouped WCAG level and best practice, can found in doc/rule-descriptions.md.
First download the package:
npm install axe-core --save-dev
Now 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()
.then(results => {
if (results.violations.length) {
throw new Error('Accessibility issues found');
}
})
.catch(err => {
console.error('Something bad happened:', err.message);
});
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 timesaver, it doesn't require special expertise, and it allows teams to focus expert resources on the accessibility issues that really need them. Unfortunately, most accessibility tools are meant to be run on sites and applications that have reached the end of the development process and 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 modern browsers, tools, and testing environments a dev 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.
The axe-core API fully supports the following browsers:
Support means that we will fix bugs and attempt to test each browser regularly. Only Chrome and Firefox 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 natively supported or polyfilled correctly. We do not support the deprecated v0 Shadow DOM implementation.
The axe-core API package consists of:
axe.js - the JavaScript file that should be included in your web site under test (API)axe.min.js - a minified version of the above fileAxe can be built using your local language. To do so, a localization file must be added to the ./locales directory. This file must have be named in the following manner: <langcode>.json. To build axe using this locale, instead of the default, run axe with the --lang flag, like so:
grunt build --lang=nl
or equivalently:
npm run build -- --lang=nl
This will create a new build for axe, called axe.<lang>.js and axe.<lang>.min.js. If you want to build localized versions, simply pass in --all-lang instead. If you want to build multiple localized versions (but not all of them), you can pass in a comma-separated list of languages to the --lang flag, like --lang=nl,ja.
To create a new translation for axe, start by running grunt translate --lang=<langcode>. This will create a json file fin the ./locales directory, with the default English text in it for you to translate. Alternatively, you could copy ./locales/_template.json. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see Check Message Template.
To update existing translation file, re-run grunt translate --lang=<langcode>. This will add new messages used in English and remove messages which were not used in English.
Additionally, locale can be applied at runtime by passing a locale object to axe.configure(). The locale object must be of the same shape as existing locales in the ./locales directory. For example:
axe.configure({
locale: {
lang: 'de',
rules: {
accesskeys: {
help: 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
},
checks: {
abstractrole: {
fail: 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
},
'aria-errormessage': {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail: 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
});
Axe-core supports the following locales. Do note that since locales are contributed by our community, they are not guaranteed to include all translations needed in a release.
Axe-core has a new minor release every 3 to 5 months, which usually introduces new rules and features. We recommend scheduling time to upgrade to these versions. Security updates will be made available for minor version lines up to 18 months old.
Refer axe-core ARIA support for a complete list of ARIA supported roles and attributes by axe.
Read the Proposing Axe-core Rules guide
Read the documentation on the architecture
Read the documentation on contributing
List of projects using axe-core
Thanks to Marat Dulin for his css-selector-parser implementation which is included for shadow DOM support.
Thanks to the Slick Parser implementers for their contribution, we have used some of their algorithms in our shadow DOM support code.
4.7.0 (2023-04-17)
Page.setDocumentContent (#3921) (66f23e5)FAQs
Accessibility engine for automated Web UI testing
The npm package axe-core receives a total of 14,017,718 weekly downloads. As such, axe-core popularity was classified as popular.
We found that axe-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.