A dialog is a window that separates content from the main content of a page. It can ask questions or require user input. When the dialog is active and opened, only the content inside the dialog should be available for interaction. Visually it’s usually overlaid on top of main content.
There are two main practices for achieving an accessible modal dialog:
- The use of appropriate WAI-ARIA roles, states, and properties markup for dialog helps assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology identify the content as grouped and separated from the rest of the page.
- Providing keyboard interaction and restricting focus within the modal helps keyboard users to navigate the content inside the dialog, and only navigate back to the main content when they’re ready.
Detailed information can be found in the WAI-ARIA authoring practices for modals.
The HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 5.2 specification will include a native <dialog> element which is being implemented by browser vendors. See caniuse.com for up-to-date information on support.
Resources
- WAI-ARIA authoring practices for dialog modal.
- Making modals accessible by Andrea Fercia
- Understanding screen reader interaction modes by Léonie Watson
- Using the dialog role (MDN web docs).
- Advanced ARIA Tips for Accessible modal dialogs.
- Mozilla Developer Network page for the HTML native dialog element.
Accessible modal dialog scripts
- A11y dialog script for creating accessible dialog windows.
- Launchy is another script for accessible modal dialog.
- Accessible and flexible React modal dialog.
- W3C Modal Dialog Example
