By Marcy Sutton / @MarcySutton
Senior Front-End Engineer, Deque Systems
We can automate testing in browsers, but not assistive technologies (yet).
Best practices and development tools help here.
Use tools to help you find:
axe.a11yCheck(context, options, callback)
axe.getRules(['wcag2a', 'section508'...])
axe.configure(options)
axe.reset()
axe.registerPlugin(plugin)
axe.cleanup()
https://github.com/dequelabs/axe-core/blob/master/doc/API.md
// Test an element reference, selector, or include/exclude object.
var context = { exclude: ['#some-id'] };
var config = {
rules: {
"color-contrast": { enabled: false },
"valid-lang": { enabled: false }
}
};
axe.a11yCheck(context, config, function(results) {
// do stuff with the results
});
https://github.com/dequelabs/axe-core/blob/master/doc/API.md#a11ycheck-parameters
Install from npm:
npm install axe-core --save-dev
Include script and run tests:
var axe = require('axe-core');
describe('Custom component', function() {
it('should have no a11y violations', function(done) {
axe.a11yCheck('.some-element-selector', {}, function (results) {
expect(result.violations.length).toBe(0);
done();
});
});
});
An open source library that injects axe-core
into Selenium Webdriver instances
npm install axe-webdriverjs --save-dev
var AxeBuilder = require('axe-webdriverjs'),
WebDriver = require('selenium-webdriver');
var driver = new WebDriver.Builder()
.forBrowser('firefox')
.build();
driver
.get('https://localhost:4000')
.then(function (done) {
AxeBuilder(driver)
.analyze(function (results) {
expect(results.violations.length).toBe(0);
done();
});
});