125

GitHub - github/accessibilityjs: Client side accessibility error scanner.

 6 years ago
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.

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

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK