Notification messages

Summary

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

Principle

Notification messages are dynamic components that announce non-critical information or warnings.

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

Core HTML base

When the page is loaded

<div role="status"></div>

When the alert is triggered

<div role="status">
  <p>Your message has been sent.</p>
</div>

ARIA roles, states and properties

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

Expected behavior

The role="status" attribute must be statically present when the page is loaded.

The container must then be dynamically populated when the notification is triggered.

Note

Notification 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.).