UI Component LabFeedback
Alert
An important message shown in the page, announced right away without interrupting what the user is doing.
Demo
Also known as
- Inline notification — Carbon Design System
- ノティフィケーションバナー — デジタル庁デザインシステム
How to recognize it
A colored box with an icon and a short message, placed near the related content or at the top of the page. The color shows the type: error, warning, success, or info.
Behavior
- Content added to a role="alert" element is read out by screen readers without moving focus.
- An alert that is already on the page when it loads is not announced.
- It should not disappear on its own, so the user has time to read it.
Keyboard
| Key | Action |
|---|---|
| — | None. An alert does not take focus, so the user can keep working. |
Usage notes
- Tell types such as success, error, warning and information apart by icon and wording, not by color alone.
- If it can be closed, keep it closed and provide a way to show it again.
Similar components
- Toast: An alert stays in the page content; a toast floats over the page and disappears on its own.
- Modal (Dialog): An alert informs without interrupting; an alert dialog (a kind of modal) stops the user until they respond.
Sources
- WAI-ARIA APG: Alert Pattern (Last checked: )
- Carbon Design System: Notification (Last checked: )
- デジタル庁デザインシステムウェブサイト「ノティフィケーションバナー」をもとに作成 (Last checked: )