https://github.com/KittyGiraudel/a11y-dialog
Installation
Using a bundler (recommended):
If you’re using a bundler (such as Webpack or Rollup), you can install a11y-dialog through npm or yarn like any other dependency:
npm install a11y-dialog
yarn add a11y-dialogThen you can import the library in your JavaScript codebase to access the A11yDialog class and instantiate your dialogs as you intend to.
import A11yDialog from 'a11y-dialog'
const container = document.querySelector('#my-dialog-container')
const dialog = new A11yDialog(container)If you rely on the data-a11y-dialog attribute to automate the dialog instantiation in order not to write JavaScript at all, you could simplify the import as such:
import 'a11y-dialog'This page demonstrates how to make a dialog window as accessible as possible to assistive technology users. Dialog windows are especially problematic for screen reader users. Often times they are able to “escape” the window and interact with other parts of the page when they should not be able to. This is partially due to the way screen reader software interacts with the browser.
To see this in action, you just need to
. Once it’s open, you should not be able to interact with other links on the main page like going to the main GitHub page. The focus is said to be “trapped” inside the dialog until the user explicitely decides to leave it.
On top of that, this implementation provides all the usual mandatory bits from a dialog window: correct usage or ARIA landmarks, absolute freedom in regard to the styling, closing when pressing ESC, closing when clicking the background overlay, closing when clicking the close button, a simple yet powerful DOM API, for 1.3Kb of JavaScript. Oh, and also it is fully tested using Cypress to make sure it works as intended.
No more excuse now. Make your dialog windows accessible.