Alert dialog

Summary

Principle

A modal alert box is a subtype of a modal dialog window.

It sends a short alert or prompts confirmation from the user, and are appropriate when:

This code is based on the “Alert Dialog” design pattern found in the WAI-ARIA 1.1 Authoring Practices of the W3C.

Core HTML base

The HTML base of an alert dialog is different depending on whether or not there is a title on the screen.

Modal alert dialog with a visible title

<div role="alertdialog" aria-modal="true" aria-labelledby="modal-heading" aria-describedby="modal-content">
  <button>Close</button>
  <h1 id="modal-heading">[Modal window title]</h1>
  <p id="modal-content">[Modal window content]</p>
</div>

Modal alert dialog without a visible title

<div role="alertdialog" aria-modal="true" aria-label="[Modal window title]" aria-describedby="modal-content">
   <button>Close</button>
   <p id="modal-content">[Modal window content]</p>
 </div>

ARIA roles, states and properties

Keyboard interactions

Tab

When the alert dialog is displayed, this key successively moves the keyboard focus through each interactive element in the alert dialog. If the keyboard focus is on the last interactive element in alert dialog when the key is pressed, the keyboard focus moves to the first interactive element in the alert dialog.

Shift + Tab

This key combination has the same behavior as the Tab key, but in reverse order. If the keyboard focus is on the first interactive element in the alert dialog when the key combination is pressed, the keyboard focus moves to the last interactive element in the modal box.

Esc

When the alert dialog is displayed, closes the alert dialog, and moves the keyboard focus to the interactive element that triggered the alert dialog opening.

Expected behavior

When the alert dialog is displayed

When the alert dialog is closed

Examples of components

The Alert dialog components are shown here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments.

Comments

Add a comment

Required fields are marked *.

Back to top