Alert dialog

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interactions.
• Expected behavior.

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:

• The message is no longer than one phrase.
• Punctuation is not necessary to understand the message. For example, modal alert boxes are not appropriate to state that a specific syntax, such as “MM/DD/YYYY”, is the expected format for a date field.
• The message does not contain information that the user will need later, such as a phone number.
• The message does not contain interactive elements, such as a link to a resource.

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 displayed 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 displayed 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

• role="alertdialog" must be applied to the container of the alert dialog.
• aria-modal="true" must be applied to the container of the alert dialog.
• If the title of the alert dialog is displayed it must be programmatically associated to the alert dialog with the aria-labelledby attribute:
  • The title of the alert dialog must contain an id attribute set to a unique value.
  • The container of the alert dialog must have an aria-labelledby attribute set to the value of the id attribute of the alert dialog.
• If the title of the alert dialog is not displayed an aria-label attribute must be applied and its value set to the container of the alert dialog.
• The message must be programmatically associated with the alert dialog using the aria-describedby attribute:
  • The message must contain an id attribute set to a unique value.
  • The container of the alert dialog must have an aria-describedby attribute set to the value of the id of the message.

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

• The keyboard focus is dynamically placed on the first interactive element in the modal dialog.
• The keyboard focus must be confined to the alert dialog and tabulating must not be possible on the rest of the page (below the alert dialog).
• The alert dialog can be closed using the Esc key.

When the alert dialog is closed

• The keyboard focus must be repositioned on the element that triggered the opening of the alert dialog.
• Ideally, the alert dialog is removed from the DOM. However, if the alert dialog is still present in the source code, then aria-hidden="true" and display: none; or visibility: hidden; must be applied to its container.

Comments

Back to top