https://github.com/github/accessibilityjs

Client side accessibility error scanner.
https://github.com/github/accessibilityjs

accessibility

Last synced: about 2 months ago
JSON representation

Client side accessibility error scanner.

• Host: GitHub
• URL: https://github.com/github/accessibilityjs
• Owner: github
• License: mit
• Archived: true
• Created: 2017-06-22T12:41:18.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2020-08-03T15:47:33.000Z (over 4 years ago)
• Last Synced: 2024-09-22T03:05:11.205Z (about 2 months ago)
• Topics: accessibility
• Language: JavaScript
• Homepage:
• Size: 141 KB
• Stars: 2,170
• Watchers: 38
• Forks: 72
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# accessibilityjs ![build status](https://travis-ci.org/github/accessibilityjs.svg?branch=master)

Client side accessibility error scanner.

## Install

```

npm install accessibilityjs --save

```

## Usage

```javascript

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](https://user-images.githubusercontent.com/1153134/31491689-bb8d8068-af0d-11e7-862b-01b059e13ba1.png)

![An alert pops up on clicking the elements](https://user-images.githubusercontent.com/1153134/31491972-c8547512-af0e-11e7-9d0d-db116eb7cf58.png)

## Browser support

- Chrome

- Firefox

- Safari 6+

- Internet Explorer 9+

- Microsoft Edge

Internet Explorer and Edge require a polyfill for [`closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill).

## Development

```bash

> npm install

> npm test

> npm run example

```