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:

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:

Example

Accessibility Features

  1. The accessible label for the alert dialog is set to its heading ("Confirmation").
  2. The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
  3. 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.

Keyboard Support

Key Function
Tab
  • Moves focus to next focusable element inside the dialog.
  • When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
Shift + Tab
  • Moves focus to previous focusable element inside the dialog.
  • When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
Escape Closes the dialog.
Command + S (Mac only) Save the contents of the notes textarea when focused.
Control + S (Windows only) Save the contents of the notes textarea when focused.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
alertdialog div Identifies the element that serves as the alert dialog container.
aria-labelledby=IDREF div Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.
aria-describedby=IDREF div 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.
aria-modal=true div Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).
alert div Identifies the element that serves as the alert notification.

Notes on aria-modal and aria-hidden

  1. The aria-modal property was introduced in ARIA 1.1. As a new property, screen reader users may experience varying degrees of support for it.
  2. Applying the aria-modal property to the dialog element replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert.
  3. In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that:
    1. aria-hidden is set to true on each element containing a portion of the inert layer.
    2. The dialog element is not a descendant of any element that has aria-hidden set to true.

Javascript and CSS Source Code

HTML Source Code