Alert & Notification
How the Alert & Notification works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
An alert is a message in a container with a live role: role="status" for most intents and role="alert" for errors, so a message that appears after an action is announced without moving focus. A toast is the same card in a corner that leaves on its own, which makes timing as important as colour.
Keyboard#
Moves through the alert's links, its action button and its close button, in reading order. An alert never takes focus on its own.
Moves back through the same controls.
Activates the focused link, action or close button.
Activates the focused button.
Semantics#
role="status"A polite live region. Announced when the screen reader is next idle, without moving focus.
Info, Warning, Success, Updaterole="alert"An assertive live region. Interrupts what is being read, so keep it for errors that need attention now.
Error<button aria-label="Dismiss">Every alert has a close button with a name. Change dismissLabel when Dismiss is not the right word.
Close<button>The primary and secondary links and the Update action are buttons. Render a real <a> when one of them navigates.
Links and actionaria-hidden="true"The intent glyph and file tile are decorative; the title carries the message.
GlyphsColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Title and description · Solid, Tint, Neutral
14px text against the card. Solid puts white on the intent's colour; Tint and Neutral put #2a2a2a and #6d6d6d on a pale wash or white.
WCAG 1.4.3 Contrast (Minimum) ↗Secondary link · Content heavy
The quieter link is white at 60% on Solid (2.24:1 on Info) and #8f8f8f on Tint (2.88:1 on Info). Both fall short.
WCAG 1.4.3 Contrast (Minimum) ↗Intent glyph and close · All appearances
The glyph sits on its own white tile in the intent's colour. The intent must also be in the words, since colour alone does not say Error or Success.
WCAG 1.4.11 Non-text Contrast ↗WCAG 1.4.1 Use of Color ↗Focus indicator · Focus visible
A 2px #1a6ef8 ring off a 2px white gap, so it contrasts with the white (4.54:1) even on a Solid card where the ring alone would vanish.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Toast timing · Toast
A toast leaves after five seconds, waits while hovered or focused, and gives 2.5s more once left. Anything a person needs to act on stays on the page too, not only in the toast.
WCAG 2.2.1 Timing Adjustable ↗WCAG 2.4.11 Focus Not Obscured ↗Measured contrast#
Title and description text against the card, for every intent and appearance, measured from the alert's tokens. 11 of 30 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- A toast rises 8px and fades in over 240ms only when motion is allowed; under prefers-reduced-motion it simply appears.
- Toasts leave without an animation, so nothing moves on the way out.
Checklist#
Every Solid pair fails 4.5:1: white on Info, Warning, Success and Update, and Error's white text at 4.49:1. Update's Tint description (#6d6d6d on #eae7ed) falls short too. Use Neutral, or Tint for the other intents, until the fills are darkened.
Add an alert that announces an event after load, and render it into a region that already exists; a live region inserted together with its text is not announced reliably by every screen reader.
An alert present when the page loads does not need a live role, but the component always sets one. Expect it to be read again by some screen readers, and keep on-load alerts few.
Toasts are for confirmations (Link copied), never for the only route to an action or an error someone must fix.
Toasts stack in a corner and can cover a focused control near it: keep the corner clear of form fields.
The close button is 28px and the action 32px, both over the 24px target minimum.