125
GitHub - github/accessibilityjs: Client side accessibility error scanner.
source link: https://github.com/github/accessibilityjs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
accessibilityjs
Client side accessibility error scanner.
Install
npm install accessibilityjs --save
Usage
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:
ImageWithoutAltAttributeError
ElementWithoutLabelError
LinkWithoutLabelOrRoleError
LabelMissingControlError
InputMissingLabelError
ButtonWithoutLabelError
ARIAAttributeMissingError
Scenario
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.
Browser support
- Chrome
- Firefox
- Safari 6+
- Internet Explorer 9+
- Microsoft Edge
Internet Explorer and Edge require a polyfill for closest
.
Development
> npm install
> npm test
> npm run example
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK