npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

a11y

v0.5.1

Published

Runs an accessibility audit against a URL

Downloads

657

Readme

npm version Build Status Dependency Status

Easy accessibility audits powered by the Chrome Accessibility Tools

Install

$ npm install --global 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 todomvc.com google.com

Example

Also works fine against localhost:

$ a11y localhost:9000

And local files:

$ a11y index.html

Even with glob patterns:

$ a11y '**/*.html'

Options

Query help:

$ a11y --help

Customise viewport size

Type: string Default: 1024x768

$ a11y --viewport-size=800x600

Set a custom delay before capturing the page

Type: number (seconds) Default: 1

$ a11y --delay=5

Useful when the site does things after load that you want to capture.

Verbose mode:

$ a11y <url> --verbose

Write audit to file:

$ a11y <url> > audit.txt

Module usage

Audit a remote URL and generate an accessibility report:

const a11y = require('a11y');

a11y('twitter.com', (err, reports) => {
    const audit = reports.audit; // `a11y` Formatted report
    const report = reports.report; // DevTools Accessibility Audit formatted report
});

Work with the output of reports.audit:

const a11y = require('a11y');

a11y('twitter.com', (err, reports) => {
    for (const report of reports) {
        // Result will be PASS, FAIL or NA
        if (report.result === 'FAIL') {
            // el.heading
            // el.severity
            // el.elements
        }
    }
});

Passing options:

const a11y = require('a11y');

const options = {
    viewportSize: '800x600'
};

a11y('twitter.com', options, (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.

Build-system integration

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

Status

At this time, this module should be relatively reliable when auditing for accessibility issues in static sites.

We are actively working on exploring support for complex web-applications, including those using JavaScript libraries such as Polymer, Angular and React/Flux. We hope to bring this work to the main master branch once it is considered stable.

License

Apache-2.0