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.4Kb
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.