Skip to content
/ ha11y Public

⭕ Browserless Parallelized Accessibility HTML Code Sniffer

License

Notifications You must be signed in to change notification settings

F1LT3R/ha11y

Repository files navigation

ha11y logo

⭕ ha11y

Browserless Parallel Accessibility HTML Code Sniffer

Build Status Coverage Status NPM Version XO code style

👨‍🔬 Experimental

⭕ ha11y is a highly experimental package. The API is subject to rapid change.

Install

npm install --save-dev ha11y

Usage

React

Test:

import React from 'react';
import {shallow} from 'enzyme';
import ha11y from 'ha11y';

import MyImgComp from '../MyImgComp';

it('ha11y test', () => {
    const dom = (
        <html lang="en">
            <head>
                <title>Foo</title>
            </head>
            <body>
                {/* Oops... no ALT tag! */}
                <MyImgComp src="foo.png"/>
            </body>
        </html>
    );

    const html = shallow(dom).html();

    return ha11y.test(html)
        .then(results => {
            const errors = results.filter(result => result.heading === 'ERROR');
            console.log(errors);
            expect(errors.length).toEqual(0);
        });
});

Output:

  FAIL  src/comps/__tests__/MyImgComp.test.js
  ● Console
[
    {
        "heading": "ERROR",
        "issue": "WCAG2AAA.Principle1.Guideline1_1.1_1_1.H37",
        "description": "Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.",
        "position": {
            "lineNumber": 1,
            "columnNumber": 0
        },
        "element": {
            "node": "<img src=\"foo.png\">",
            "class": "", 
            "id": ""
        }
    }
]

Licence

Runs on HTML_CodeSniffer — see licence.txt

Releases

No releases published

Packages

No packages published