Alert messages

Summary

Principle.
Core HTML base.
ARIA roles, states and properties.
Expected behaviour.
Note.

Principle

Alert messages are a special case of notification messages that are used to report a critical error or warning.

They grab the reader’s attention through a short message that is displayed all at once on the screen, without reloading the page or interrupting the activity.

This code is based on the “Alert” design pattern found in ARIA Authoring Practices Guide (APG) of the W3C.

The source code and implementation examples for this component are available in this guide.

Core HTML base

When the page is loaded

<div role="alert"></div>

When the alert is triggered

<div role="alert">
  <p>Seating may not be available on this trip.</p>
</div>

ARIA roles, states and properties

The role="alert" attribute must be applied to the container of the alert message.

Expected behavior

The role="alert" attribute must be statically present when the page is loaded, and not be hidden via display: none or visibility: hidden.

This container must then be dynamically populated when the alert is triggered.

Note

Alert messages must not disappear automatically from the screen after a certain time.

They must disappear only following a deliberate action by the user (closing “X”, display of a new page, etc.).

Tip

When messages appear as popins and may obscure part of the page’s content, it is good practice to allow users to close them using the ESC key.

Comments

Updates

27 October 2025: Minor update.