Alert dialog (alert pop-in)

Summary

Principle

A modal alert dialog is a type of modal dialog window, which is itself a subtype of a modal window.

A modal alert communicates a concise message or prompts a confirmation from the user. It has the following characteristics:

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

Core HTML base

The HTML code for a modal alert dialog varies slightly depending on whether it has a visible title or not.

Modal alert dialog with a visible title

<div role="alertdialog" aria-labelledby="modal-title" aria-describedby="modal-message">
  <h1 id="modal-title">Title of the modal alert </h1>
  <p id="modal-message">Message of the modal alert </p>
  <button>Cancel</button>
  <button>[Default action]</button>
</div>

Modal alert dialog without a visible title

<div role="alertdialog" aria-label="Title of the modal alert dialog" aria-describedby="modal-message">
  <p id="modal-message">Message for the modal alert dialog </p>
  <button> Cancel </button>
  <button>[Default action]</button>
</div>

ARIA roles, states and properties

Keyboard interactions

Tab

When the alert dialog is visible, this key successively moves the keyboard focus through each interactive element in the modal alert dialog. If the keyboard focus is on the last interactive element in the 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.

Enter

If the alert dialog is visible, this key triggers the default action of the alert dialog.

Expected behavior

When the alert dialog is visible

When the alert dialog is closed

Notes

If the HTML containers of the modal alert dialog and of the rest of the page are siblings in the source code, i.e. at the same hierarchical level in the DOM tree, the aria-hidden="true" attribute is added to the container of the rest of the page, when the modal alert dialog is visible:

<body>
  <div aria-hidden="true">
    [Content for the rest of the page]
  </div>
  <div role="alertdialog" aria-labelledby="modal-title" aria-describedby="modal-message">
    <h1 id="modal-title">Title of the alert dialog </h1>
    <p id="modal-message">Message of the alert dialog </p>
    <button>Cancel</button>
    <button>[Default action]</button>
  </div>
</body>

The aria-hidden="true" attribute should then be removed from the container of the rest of the page when the modal alert dialog is closed:

<body>
  <div>
    [Content on rest of the page]
  </div>
</body>

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

Comments

Add a comment

Required fields are marked *.

Back to top