Browserless Parallel Accessibility HTML Code Sniffer
⭕ ha11y is a highly experimental package. The API is subject to rapid change.
npm install --save-dev ha11y
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": ""
}
}
]Runs on HTML_CodeSniffer — see licence.txt