Client side accessibility error scanner.

Перейти к файлу

Mu-An ✌️ Chiou 078813cff0 1.0.1		2017-10-13 18:57:23 +08:00
test	Fix label error name and add InputMissingLabelError for better error message	2017-10-13 12:24:28 +08:00
.babelrc	Change window global	2017-10-06 10:11:27 +08:00
.eslintrc	Fix typo, add eslint rules, and fix errors	2017-10-11 16:55:39 +08:00
.gitignore	Add babel for es2015	2017-10-06 09:30:42 +08:00
LICENSE	Add license text	2017-06-26 23:42:08 +08:00
README.md	Undo scoping module	2017-10-13 18:37:25 +08:00
example.html	Make ariaPairs an option to pass in	2017-10-12 18:19:49 +08:00
index.js	Be explicit about input types	2017-10-13 18:53:02 +08:00
package-lock.json	1.0.1	2017-10-13 18:57:23 +08:00
package.json	1.0.1	2017-10-13 18:57:23 +08:00

README.md

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('ready', 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