ARIA: alertdialog role
The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response.
Not to be confused with the live region
alert role, the
alertdialog role defines a modal dialog that interrupts the user's workflow. It is used to communicate an important message and get a response. Examples include error messages that require a confirmation and other action confirmation prompts. The
alertdialog role is not to be used as a replacement for other dialogs, including no confirmation required alert dialogs
Window.alert() and prompts
The alert dialog must have at least one focusable control -- such as Confirm, Close, and/or Cancel -- and focus must be moved to that control when the alert dialog appears. Alertdialogs can have additional interactive controls such as text fields and checkboxes.
As the name implies,
alertdialog is a type of dialog. This means the
dialog role's states, properties, and keyboard focus requirements are applicable to the alertdialog role as well:
<div id="alert_dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc"> <h2 id="dialog_label">Confirmation</h2> <div id="dialog_desc"> <p>Are you sure you want to delete this image?</p> <p>This change can't be undone.</p> </div> <ul> <li> <button type="button" onclick="closeThis()">No</button> </li> <li> <button type="button" aria-controls="form" id="delete_file_confirm" onclick="deleteFile()">Yes</button> </li> </div> </div>
Marking up an alert dialog containing element with the
alertdialog role helps assistive technology identify the content as being grouped and separated from the rest of the page content. However, adding
role="alertdialog" alone is not sufficient to make the alert dialog accessible. The following needs to be done:
- The alert dialog must be properly labeled
- Keyboard focus must be managed correctly
Use this attribute to label the alertdialog. The
aria-labelledbyattribute is generally the id of the element used to title the alertdialog.
Use this attribute to encompass the description of the contents of the alert dialog. The value of the
aria-describedbyattribute is generally the ID of the element containing the alert dialog's messaging, usually coming right after the title.
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA: alertdialog role' in that specification.
|WAI-ARIA Authoring Practices 1.2
The definition of 'Alertdialog' in that specification.