Dialog (Modal)
A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.
— Dialog (Modal) Pattern, WAI ARIA Authoring Practices Guide (APG)
§ Notes
Missing.css uses the <dialog> element for dialogs (modals).
Until the commandfor attribute gains wider implementation, visibility must be controlled by JavaScript using the .showModal() and .close() methods.
While <dialog id=my-dialog popover> and <button popovertarget=my-dialog> might appear to work, the Popover API does not render the dialog as a modal, that is to say it will not block interaction with the rest of the page until the dialog is closed.
Don't forget to add an ARIA label to the <dialog> element.
Keyboard Interaction
- Tab : Move focus to the next focusable element in the dialog, with wrap-around.
- Shift Tab : Move focus to the previous focusable element in the dialog, with wrap-around.
- Escape : Closes the dialog.