Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/github/accessibilityjs
Client side accessibility error scanner.
https://github.com/github/accessibilityjs
accessibility
Last synced: about 1 month 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: 2025-01-15T03:55:17.112Z (about 1 month ago)
- Topics: accessibility
- Language: JavaScript
- Homepage:
- Size: 141 KB
- Stars: 2,173
- Watchers: 38
- Forks: 72
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# accessibilityjs 
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.


## Browser support
- Chrome
- Firefox
- Safari 6+
- Internet Explorer 9+
- Microsoft EdgeInternet 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
```