Alert Dialog Example

About This Example

The below example of a confirmation prompt demonstrates the Alert Dialog Pattern. It also includes an example of the Alert Pattern to make comparing the experiences provided by the two patterns easy.

To use this example:

Similar examples include:

Example

Accessibility Features

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="ID_REFERENCE" div Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.
aria-describedby="ID_REFERENCE" 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.
aria-disabled="true" button Tells assistive technology users the button cannot be activated.

Notes on aria-modal and aria-hidden

Javascript and CSS Source Code

HTML Source Code

To copy the following HTML code, please open it in CodePen.