cristinafsanz
8/9/2019 - 8:06 AM
Automatic testing accessibility
By @_angelmm:
a11y npm library
- Using npm library a11y. It is based on Pupeteer and execute tests very fast.
- Open source repo to check:
- https://github.com/bitnami/hex/blob/master/packages/hex-react/scripts/pa11y.js
- A little script initialize webpack-dev-server and then executes the a11y library:
Manual testing
- In accessibility, not everything can be tested:
- Better do manual testing with screen readers. With Mac VoiceOver is easy to use.
- Chrome extension: Accessibility Insights for Web
- It gives a checklist to complete manually and it offers you visual help to check that the web is accessible.
Other resources
- How to Automate Web Accessibility Testing: https://hackernoon.com/how-to-automate-web-accessibility-testing-ri49m305i
- Accessibility Testing with pa11y: https://bitsofco.de/pa11y/
- Making accessibility testing suck less: https://tehfedaykin.github.io/pa11yBFF/#/title
- Example basic test: https://github.com/tehfedaykin/AllAboutCryptoKitties/blob/master/examples/v5/basicAF.js
- More up to date repo: https://github.com/tehfedaykin/GossipGirlNG
- Example actions:
actions:[ 'wait for path to be /select-passenger', 'screen capture second.png' ] - Broadening horizons with web accessibility (pa11y and http-server): https://mrmatt.io/posts/broadening-horizons-in-web-accessibility/
- Script start server and test: https://github.com/bahmutov/start-server-and-test
"a11y-check": "npm run build && start-server-and-test 'http-server ./dist --silent' 8080 'pa11y http://localhost:8080'""a11y-check-local-build": "npm run build && start-server-and-test 'http-server ./dist -c-1 --silent' 8080 'node pa11y/index.js 'http://localhost:8080''"
/*
Accessibility test example
- actions are the steps to execute before running the test
- hideElements: needed because the pa11y check hidden prefetch images otherwise
- log to display what's happening to the console
*/
'use strict'
const pa11y = require('pa11y')
let URL = '';
// Get url to test performance
(() => {
const argv = process.argv.slice(2)
URL = argv[0]
})()
function errorIfIssues(results) {
if (results && results.issues.length > 0) {
console.error(results)
process.exit(1)
}
}
pa11y(URL, {
actions: [
// First page
'click element .button-instructions',
// First screen game
'wait for element .button-game to be visible'
],
hideElements: "[class^='prefetch-image-wrapper']",
log: {
debug: (message) => {
if (!message.startsWith('Browser Console:')) {
console.log(message)
}
},
error: console.error,
info: console.log
}
}).then((results) => {
errorIfIssues(results)
}).catch((error) => {
throw new Error(error)
})