Accessibility Plugin
Protractor comes with support for three accessibility testing options:
- Accessibility Developer Tools
- aXe Accessibility Engine
- Tenon.io
Protractor will run each set of audits (depending on your configuration) on your existing end-to-end tests to ensure your site is free of obvious errors. In this kind of testing, there is no concept of "warnings"–only pass or fail. In your configuration, you can decide whether warnings should pass or fail your build.
To understand how each of these tools can be used, see this support matrix:
| Testing Library | Pricing | API Key | External Request | No. of Tests | Info |
|---|---|---|---|---|---|
| Chrome Accessibility Developer Tools | Free | No | No | 14 | GitHub |
| aXe Accessibility Engine | Free | No | No | 53 | GitHub |
| Tenon.io | Free limited accounts, paid subscriptions | Yes | Yes | 63 | Tenon.io |
Protractor now supports the Accessibility Developer Tools, the same audit library used by the Chrome browser extension. Protractor runs an audit locally by injecting the Dev Tools script into WebDriver pages, and it can diagnose issues including missing labels, incorrect ARIA attributes and color contrast. This is a great starting point if you can't send source code over the wire through an API.
aXe operates similarly to Chrome's Accessibility Developer Tools by injecting axe-core into all frames and checking the content against 53 accessibility rules.
Tenon.io has a more robust set of tests to help you find accessibility issues, but it requires registering for an API key and making an external request for each test, which may not work for everyone. Some people use Tenon with introspection services like ngrok or localtunnel to securely test local web servers. Protractor takes the options you provide in the plugin configuration and sends them with the page source to the Tenon API. One limitation of this approach is that all scripts must be reachable from the page source as a string, for example, by using a CDN. For projects with an MIT license, Tenon is free but with a limited daily API limit. Paid subscriptions are available for enterprise and commercial projects.
Enable this plugin in your config file:
// Chrome Accessibility Dev Tools only:
exports.config = {
...
plugins: [{
chromeA11YDevTools: {
treatWarningsAsFailures: true,
auditConfiguration: {
auditRulesToRun: [
'audioWithoutControls',
'badAriaAttributeValue',
'badAriaRole',
'controlsWithoutLabel',
'elementsWithMeaningfulBackgroundImage',
'focusableElementNotVisibleAndNotAriaHidden',
'imagesWithoutAltText',
'linkWithUnclearPurpose',
'lowContrastElements',
'mainRoleOnInappropriateElement',
'nonExistentAriaLabelledbyElement',
'pageWithoutTitle',
'requiredAriaAttributeMissing',
'unfocusableElementsWithOnClick',
'videoWithoutCaptions'
],
auditRulesToSkip: []
}
},
package: 'protractor-accessibility-plugin'
}]
} // aXe only:
exports.config = {
...
plugins: [{
axe: true,
package: 'protractor-accessibility-plugin'
}]
} // Tenon.io only:
exports.config = {
...
plugins: [{
tenonIO: {
options: {
// See http://tenon.io/documentation/understanding-request-parameters.php
// options.src will be added by the test.
},
printAll: false, // whether the plugin should log API response
},
chromeA11YDevTools: true,
package: 'protractor-accessibility-plugin'
}]
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent