Alert Dialog Example
The below example of a confirmation prompt demonstrates the design pattern for an alert dialog. It also includes an example of the design pattern for an alert to make comparing the experiences provided by the two patterns easy.
To use this example:
Activate the "discard" button to trigger a confirmation dialog.
- Activating the "yes" button removes the contents of both the "Notes" text area and local storage of the notes.
- Activating the "no" button or pressing escape closes the dialog.
- The "discard" button is disabled if the notes text area does not contain any text.
Activate the "save" button to trigger an alert when it saves the contents of the "Notes" text area to local storage.
- A successful save triggers a short alert to notify the user that the notes have been saved.
- The "save" button is disabled if the user's local storage value is the same as the "Notes" field.
- Modify the "notes" text area as needed to enable and disable the discard and save functions.
Note: This example uses code from the modal dialog example to create the behaviors of the
alertdialog so referencing that example may be useful.
Similar examples include:
- Alert: a basic alert.
- Modal Dialog Example: An example demonstrating multiple layers of modal dialogs with both small and large amounts of content.
Are you sure you want to discard all of your notes?
- The accessible label for the alert dialog is set to its heading ("Confirmation").
- The dialog's prompt ("Are you sure...?") is referenced via
aria-describedbyto ensure that the user is immediately aware of the prompt.
Focus is automatically set to the first focusable element inside the dialog, which is the "No"
button. This is the least destructive action, so focusing "No" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.
|Shift + Tab||
|Escape||Closes the dialog.|
|Command + S||(Mac only) Save the contents of the notes
|Control + S||(Windows only) Save the contents of the notes
Role, Property, State, and Tabindex Attributes
||Identifies the element that serves as the alert dialog container.|
||Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.|
||Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog.|
||Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).|
||Identifies the element that serves as the alert notification.|
aria-modalproperty was introduced in ARIA 1.1. As a new property, screen reader users may experience varying degrees of support for it.
aria-modalproperty to the
dialogelement replaces the technique of using
aria-hiddenon the background for informing assistive technologies that content outside a dialog is inert.
In legacy dialog implementations where
aria-hiddenis used to make content outside a dialog inert for assistive technology users, it is important that:
aria-hiddenis set to
trueon each element containing a portion of the inert layer.
- The dialog element is not a descendant of any element that has