4.4: WAI-ARIA Alert and Message Dialogs

Last updated
Save as PDF

Page ID: 15603

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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").

Try This: In the following example of a WAI-ARIA alert, start ChromeVox, then press the “Say Something” button to hear how ChromeVox handles the message that appears. Examine the script and HTML below to see how it was done.

A link to an interactive elements can be found at the bottom of this page.

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)

Thumbnail for the embedded element "WAI-ARIA Alerts"

A YouTube element has been excluded from this version of the text. You can view it online here: https://pressbooks.library.ryerson.ca/wafd/?p=308

Suggested Reading: Using ARIA role=”alert” or Live Regions to Identify Errors

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".

Suggested Reading: