markdown-body entry-content container-lg" itemprop="text">

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

License

github/accessibilityjs

ErrorLooks like something went wrong!

About

Topics

Resources

License

Code of conduct

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors 6

Uh oh!

Languages

Error
Looks like something went wrong!

Packages