Skip to content
Client side accessibility error scanner.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.babelrc
.eslintrc.json
.gitignore
.travis.yml
LICENSE
README.md
example.html Update `example` - log all errors Oct 27, 2017
index.js Check for `el.hasAttribute` before invoking May 8, 2018
package-lock.json
package.json
prettier.config.js

README.md

accessibilityjs build status

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.

Red borders are added to offending elements example

An alert pops up on clicking the elements

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
You can’t perform that action at this time.