Alert and Message Dialog
An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response. Examples include action confirmation prompts and error message confirmations. The alertdialog role enables assistive technologies and browsers to distinguish alert dialogs from other dialogs so they have the option of giving alert dialogs special treatment, such as playing a system alert sound.
— Alert and Message Dialog Pattern, WAI ARIA Authoring Practices Guide (APG)
§ Notes
Missing.css uses the <dialog role=alertdialog> element for alert dialogs.
You can use colorways to provide some visual context to the alert, but be sure to also spell it out in writing.
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.
The <dialog> element should also contain a aria-describedby reference to the element containing the alert message.
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.