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 the user is 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 half a kilobyte of JavaScript. Oh, and also it is fully tested using a headless browser to make sure it works as intended.
No more excuse now. Make your dialog windows accessible.