
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
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.
The Accessibility Engine for automated testing of HTML-based user interfaces. Drop the aXe on your accessibility defects!
Thanks for helping us to make axe-core the most widely used HTML accessibility testing library in the galaxy! Share your axe-core story using #axecoresquad or by submitting it here to get a sweet T-shirt.
We believe that automated testing has an important role to play in achieving digital equality and that in order to do that, it must achieve mainstream adoption by professional web developers. That means that the tests must inspire trust, must be fast, must work everywhere and must be available everywhere.
aXe is the third generation of accessibility rules for HTML-based user interfaces that differentiates itself from other approaches and rules repositories in the following ways:
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(function (err, results) {
if (err) throw err;
ok(results.violations.length === 0, 'Should be no accessibility issues');
// complete the async call
...
});
The aXe API fully supports the following browsers:
Support means that we will fix bugs and attempt to test each browser regularly. Only Firefox and Chrome 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.
The complete list of rules run by axe-core can be found in doc/rule-descriptions.md.
The aXe 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
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.
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. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below.
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 {{~it.data:value}} `{{=value}}{{~}}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
})
Refer aXe 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 Dulin Marat 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.
FAQs
Accessibility engine for automated Web UI testing
The npm package axe-core receives a total of 18,355,331 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.