WAI-ARIA Alert and Message Dialogs

Providing feedback after a user completes an action is a critical accessibility feature. Feedback can be an error message when something has gone wrong. Additionally, it can  be a confirmation or warning, after which a user has to make a decision before proceeding. Or, it could be completion feedback that is presented after a particular action has occurred to indicate it was successful.

The latter is often overlooked by developers. However, for people using a screen reader, notification that an action was successful can be as important as providing error messages. When completion feedback is provided, screen reader users do not need to search through the content of the screen to be sure the action they just completed was successful — the process  can be quite time-consuming.

In each type of feedback, it is critical that messages be easy to access. The best strategy for making feedback accessible is to use the WAI-ARIA alert or alert-dialog roles. These are both types of live regions. When the content of the container element with role="alert" changes, the content that appears is automatically read aloud by screen readers. A WAI-ARIA alert has an implicit aria-live="assertive" and aria-atomic="true" (to be covered in more detail in the section on live regions). This means that, when the message appears, it will interrupt whatever the screen reader is in the middle of reading, and the entire content of the element will be read, as opposed to just the new content added (i.e., aria-atomic="false").

alert vs. alertdialog

Error, warning, and completion feedback will typically be created with role="alert", while confirmation feedback will often use role="alertdialog". Use role="alert"  when no user input is needed. Use role="alertdialog" when user input is expected, with focus sent to the dialog. At least one element in the dialog must be focusable when using role="alertdialog".

Watch and listen to the following video to understand how ChromeVox handles WAI-ARIA alerts.

Video: WAI-ARIA Alerts (1:09)

Modal Dialogs

Modal dialogs interrupt users and require an action. They are appropriate when users’ attention needs to be directed toward important information.

Modal dialogs are defined using role="alertdialog" and aria-modal="true". Be aware what WAI-ARIA is used for modals, and be aware that when a modal dialog is displayed, focus must be sent to the dialog, and it must remain in the dialog until whatever interaction is complete (e.g., clicking the confirmation button) and the dialog closes. When the dialog closes, focus must be returned to the location from where the dialog was opened.

Dialogs

Dialogs are used like modal dialogs are, except it is still possible to interact with the other content of the page. These are defined using role="dialog".