Overview
Messages state short, important information for the reader to understand and/or act on.
Anatomy
Anatomy
Design
Success message
Success
Warning message
warning
Error message
error
Information message
Information
Alert messages
Updated May 12, 2026
Requirements
- Make sure users can dismiss the message using the Escape key.
- Use a descriptive UI label to explain the purpose of the message.
- Make sure the label is associated with the button so assistive technologies can announce its purpose.
Known issues
The focus indicator color (#FFB500) does not meet the 4.5:1 contrast ratio. We'll update this when we have a new version of the focus indicator.
The colour #EE6700 does not currently meet the required 4.5:1 contrast ratio. We'll update this in a future release.
Keyboard commands
| Key | Function |
|---|---|
| Tab | Moves focus to the action or link in the message. |
| Escape | Dismisses the message. |
Current WCAG conformance level
WCAG 2.1 AA
WCAG success criteria
- W3C Alert example
- WAI-ARIA Authoring practices 1.1
- WAI-ARIA Authoring practices 1.1: Alert
- WCAG 2.1 Understanding success criterion 3.3.1: Error identification
- WCAG 2.1 Understanding success criterion 3.3.3: Error suggestion
- WCAG 2.1 Understanding success criterion 4.1.3: Status messages
Learn more
| Date | Change |
|---|---|
| September 2024 | Copied information from Web Design System / Alert Messages. |