Client side accessibility error scanner.
npm install accessibilityjs --save
import {scanForProblems} from 'accessibilityjs'
function logError(error) {
error.element.classList.add('accessibility-error')
error.element.addEventListener('click', function () {
alert(`${error.name}\n\n${error.message}`)
}, {once: true})
}
document.addEventListener('DOMContentLoaded', function() {
scanForProblems(document, logError)
})List of errors:
ImageWithoutAltAttributeErrorElementWithoutLabelErrorLinkWithoutLabelOrRoleErrorLabelMissingControlErrorInputMissingLabelErrorButtonWithoutLabelErrorARIAAttributeMissingError
In GitHub we use this script to scan for inaccessible elements in development and production staff mode. We style the elements with red borders in the logError function passed in, and add a click handler explaining the reasons.
- Chrome
- Firefox
- Safari 6+
- Internet Explorer 9+
- Microsoft Edge
Internet Explorer and Edge require a polyfill for closest.
> npm install
> npm test
> npm run example
