Alert and Inline Message
A persistent message tied to a context, which is where anything requiring action belongs.
Definition
An alert communicates a status or condition and stays until it is resolved or dismissed. Its persistence is what makes it suitable for information the user must act on.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
Placement by scope
| Scope | Placement |
|---|---|
| A single field | Directly below the field, associated with aria-describedby. |
| A form or section | At the top of that section, with links to the affected fields. |
| The whole page | Below the header, above the content. |
| The whole account | A persistent bar, used very sparingly. |
Requirements
- Icon plus colour plus text. Colour alone fails WCAG 1.4.1.
- State the problem and the next action, with a control where one applies.
- role alert for messages requiring immediate attention; role status for routine updates.
- Do not allow dismissal of an alert describing an unresolved blocking condition.
- Keep the tone factual. The user is not at fault.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Help Users Recognise, Diagnose and Recover From ErrorsHeuristic
- Semantic ColorUI foundation
Depends on
Get these right first, or this one will not hold.
- Status Messages and Live RegionsAccessibility
- Use of ColorAccessibility
Commonly confused with
Close enough to be mixed up, different enough to matter.
- ToastComponent
An inline alert stays with the thing it describes. A toast disappears, so it cannot carry anything important.