⭕️ ha11y
Browserless Parallel Accessibility HTML Code Sniffer
👨🔬 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>
{}
<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__/passage.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