https://github.com/daun/a11y-tools
Simple accessibility helpers
https://github.com/daun/a11y-tools
a11y accessibility helpers
Last synced: about 1 year ago
JSON representation
Simple accessibility helpers
- Host: GitHub
- URL: https://github.com/daun/a11y-tools
- Owner: daun
- License: mit
- Created: 2022-01-06T17:55:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-06T18:15:42.000Z (over 4 years ago)
- Last Synced: 2025-01-31T15:15:56.836Z (over 1 year ago)
- Topics: a11y, accessibility, helpers
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A11y Tools
[](https://www.npmjs.com/package/a11y-tools)
[](https://bundlephobia.com/result?p=a11y-tools)
[](./LICENSE)
Collection of simple accessibility helpers.
- [ARIA](#aria)
- [Focus](#focus)
- [Speech](#speech)
## Installation
```bash
npm install a11y-tools
```
## ARIA
### Hide/Show
```js
import { ariaHide, ariaShow } from 'a11y-tools'
ariaHide(element) // set aria-hidden="true"
ariaShow(element) // set aria-hidden="false"
```
### Disable/Enable
```js
import { ariaDisable, ariaEnable } from 'a11y-tools'
ariaDisable(element) // set aria-disabled="true"
ariaEnable(element) // set aria-disabled="false"
```
### Input States
```js
import { ariaCheck, ariaUncheck, ariaSelect, ariaUnselect, ariaPress, ariaUnpress } from 'a11y-tools'
ariaCheck(element) // set aria-checked="true"
ariaUncheck(element) // set aria-checked="false"
ariaSelect(element) // set aria-selected="true"
ariaUnselect(element) // set aria-selected="false"
ariaPress(element) // set aria-pressed="true"
ariaUnpress(element) // set aria-pressed="false"
```
### Current
```js
import { ariaCurrent } from 'a11y-tools'
ariaCurrent(element) // set aria-current="true"
ariaCurrent(element, false) // set aria-current="false"
ariaCurrent(element, 'page') // set aria-current="page"
ariaCurrent(element, null) // remove aria-current
```
### Expand/Contract
`element` = Toggle element (button)
`label` = Text content of toggle element
`container` = Content container (DOM element)
```js
import { ariaExpand, ariaContract } from 'a11y-tools'
ariaExpand(element) // set aria-expanded="true"
ariaContract(element) // set aria-expanded="false"
ariaExpand(element, { container, label = 'Close' })
ariaContract(element, { container, label = 'Open' })
```
## Focus
### Trap focus
```js
import { trapFocus } from 'a11y-tools'
// Trap focus inside element
const focusTrapUndoFunction = trapFocus(element, {
unfocusElements: true // aria-hide sibling containers?
})
// Restore focus to previously focused element
focusTrapUndoFunction()
```
### Focus element
```js
import { focus } from 'a11y-tools'
// Focus first tabbable child element without scrolling to it
focus(element, { scroll: false })
```
## Speech
### Announce to screenreaders
```js
import { speak } from 'a11y-tools'
speak('Navigated to page: About')
```
## License
[MIT](https://opensource.org/licenses/MIT)