https://github.com/informatix8/access-modal

A modal service with accessibility considerations
https://github.com/informatix8/access-modal

a11y accessible modal vanilla-javascript

Last synced: about 1 month ago
JSON representation

A modal service with accessibility considerations

• Host: GitHub
• URL: https://github.com/informatix8/access-modal
• Owner: informatix8
• Created: 2019-05-24T15:09:50.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-08T20:20:17.000Z (over 5 years ago)
• Last Synced: 2025-01-03T20:06:47.425Z (about 1 month ago)
• Topics: a11y, accessible, modal, vanilla-javascript
• Language: JavaScript
• Homepage: https://access-modal.com/
• Size: 73.2 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Access Modal

A modal service with accessibility considerations.

Examples and the API are in the [documentation](https://access-modal.com)

## Features

- Esc closes the modal

- Shift + Tab brings focus to the browser chrome once modal is open, i.e. it is the first element in the DOM

    - *Note:* tabbing should move focus within the DOM in a loop - the only way out to the browser is with **Shift+Tab** when you’re at the first focusable element in the DOM.

- **Role** on the chrome must be `dialog` or `alertdialog` where `alertdialog` signifies more importance

- **Role=document** on the modal content so screen readers begin reading it. Optional, but on by default.

- Demonstrate **aria-labelledby** to point to the modal title bar

- Demonstrate **aria-describedby** to tell the user where the beginning of the modal content is

- Demonstrate a good **aria-label** and on the close button along with a good description linked with **aria-describedby**

- Disallow focus to reach outside the modal content

- Remember last focused element before opening and return focus there upon closing

- Disallow screen readers to read outside the modal content - achieved with an all encompassing wrapper and applying **aria-hidden**

- Set proper **tabindex** on the modal chrome and content: per W3C specification: the modal chrome (AKA backdrop or overlay) is inoperable, therefore tabindex="-1"

- Focus the modal content upon open

### Other Features

- Support for modal within a modal

- User defined callbacks for pre/post open and close events

## Usage

### Install

```shell

npm install @informatix8/access-modal --save-dev

```

### CDN

```html

```

## Development

```shell

npm run dev

```

## Build

```shell

npm run build

```

## Release

```shell

npm run build

git tag -a vX.Y.Z

git push origin master

git push origin --tags

npm publish --access=public .

```