a11y editorconfig travis-ci npm

Accessibility audit tooling for the web (alpha)

4 years after

NPM version Build Status Dependency Status

Easy accessibility audits powered by the Chrome Accessibility Tools.

Install

$ npm install -g a11y

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall a11y if that happens.

CLI usage

Run an audit against a URL:

$ a11y todomvc.com

or multiple URLs:

$ a11y http://todomvc.com https://google.com

Example

Also works fine against localhost:

$ a11y localhost:9000

and local files:

$ a11y index.html

Options

Query help:

$ a11y --help

Customise viewport size:

$ a11y --viewport-size=800x600

Verbose mode:

$ a11y <url> --verbose

Write audit to file:

$ a11y <url> > audit.txt

Module usage

Audit a remote URL and generate an accessibility report:

var a11y = require('a11y');

a11y('twitter.com', function (err, reports) {
    var output = JSON.parse(reports);
    var audit = output.audit; // a11y Formatted report
    var report = output.report; // DevTools Accessibility Audit formatted report
});

Work with the output of reports.audit:

var a11y = require('a11y');

a11y('twitter.com', function (err, reports) {
    reports.audit.forEach(function (el) {
        // result will be PASS, FAIL or NA
        if (el.result === 'FAIL') {
            // el.heading
            // el.severity
            // el.elements
        }
    });
});

Passing options:

var a11y = require('a11y');
var options = {
  viewportSize: '800x600'
};

a11y('twitter.com', options, function (err, reports) {
    // ...
});

Currently, the only suported option is:

  • viewportSize (String in format WIDTHxHEIGHT, eg 800x600)

Interpreting results

To interpret how to fix individual issues in an audit, see the Audit Rules section of the Accessibility Developer Tools project.

Per the Accessibility Developer Tools, the results in an audit may be one of three types:

  • PASS - implies that there were elements on the page that may potentially have failed this audit rule, but they passed. Congratulations!
  • FAIL - This implies that there were elements on the page that did not pass this audit rule. This is the only result you will probably be interested in.
  • NA - This implies that there were no elements on the page that may potentially have failed this audit rule. For example, an audit rule that checks video elements for subtitles would return this result if there were no video elements on the page.

Integrating a11y into your build

If you use Grunt, grunt-a11y is a task by João Figueiredo that uses a11y under the hood.

License

Apache-2.0

Related Repositories

react-a11y

react-a11y

Identifies accessibility issues in your React.js elements ...

a11y-dialog

a11y-dialog

A very lightweight and flexible accessible modal dialog. ...

awesome-a11y

awesome-a11y

:book: List of awesome accessibility resources ...

eslint-plugin-jsx-a11y

eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements. ...

a11y-tools

a11y-tools

JS Accessibility Tool List ...


Top Contributors

addyosmani sindresorhus arthurvr attiks jrcryer lucalanca

Releases

-   v0.2.3 zip tar
-   v0.2.2 zip tar
-   v0.2.1 zip tar
-   v0.2.0 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar