New Components

Snackbar / Toast message

The snackbar, or toast message, displays a short, temporary message at the edge of the screen, usually after a user action. It confirms an operation or conveys brief information without interrupting the current task. The message appears automatically, remains displayed for a limited time, then disappears without intervention. It does not take focus. Its automatic dismissal makes it a secondary channel: the information it carries must always remain available elsewhere.

On this page

When to use a toast message

  • Confirm a successful action: saved, added, link copied. The user carries on without closing anything.
  • Report background work: a sync finished, a message sent.
  • Offer an immediate undo: "Item deleted, Undo", provided there is time to act.

When not to use one

  • For a blocking error: a message that disappears does not suit information the user needs in order to fix something. Use a persistent alert message.
  • For a decision: as soon as an answer is required, it is a dialog.
  • For long text: a toast is read in a second. Beyond two lines, change component.

Modes of action

  • Mouse: a toast never steals focus. Hovering pauses its disappearance.
  • Keyboard: a toast does not enter the tab order, unless it holds an action, which then becomes a reachable button.
  • Screen reader: the text is announced by a polite live region, without interrupting whatever is being read.

Content

  • One sentence: what has happened, in the past tense. "Changes saved".
  • Long enough on screen: no referential sets the minimum. The Ipedis rule is six seconds at least, plus half a second per word, and twenty seconds at most, the countdown pausing on hover and on focus (WCAG 2.2.1).
  • No unique information: whatever the toast says has to remain findable elsewhere on the page.

On this page

Keywords

  • Toast message: a brief message shown as an overlay, which disappears on its own.
  • role="status": a polite live region. It waits for a pause before announcing and does not interrupt the user.
  • aria-atomic: has the whole region read again on every change, rather than only the fragment added.
  • Dismiss delay: the time before it disappears. It falls under criterion 2.2.1 on time limits, which gives no figure for toasts.

Breakdown of the components

The demonstration shows a toast that appears, announces itself and disappears without disturbing navigation.

The live region

  • It exists in the HTML from page load, and it is empty. A region created at the moment of the announcement is not exposed: the screen reader was not watching it (WCAG 4.1.3).
  • The region is cleared before writing: without that, two successive actions producing the same text would only be announced once.
  • A toast is polite, never assertive: it confirms, it does not alert.

The disappearance

  • The timer restarts from zero on every new message, and is cancelled when the component is hidden.
  • The delay is worked out from the length of the message, six seconds at least and twenty at most. No referential sets that minimum: WCAG 2.2.1 gives no figure for toasts, the question is still open at the W3C and RGAA 13.1 points back to the same criterion. It is therefore a house rule, owned as one.
  • Hover and focus pause the countdown: a user who reads slowly is not rushed (WCAG 2.2.1).
  • The content of the toast is never the only trace of the information: the page keeps one elsewhere.

Screen reader

  • Focus never moves to the toast: the user stays where they were working.
  • role="status" is enough; adding aria-live="polite" is redundant but harmless, the opposite would be contradictory.
  • If the toast holds an action, that action is a real button, reachable by keyboard, and the display time is extended accordingly.
  • The announced text is exactly the displayed text: no shortened version kept for the voice.

A simple message snackbar does not receive focus and has no keyboard interaction. Only variants containing an action or close button enter the tab sequence.

Keyboard interactions for the Snackbar / Toast message component
Key Function
Not applicable (simple message) A snackbar with no interactive element does not receive focus and does not respond to any key. The announcement is handled by the associated live region.
Tab When the snackbar contains an action or close button, moves focus to that button. The timeout is then suspended.
Enter or Space Activates the snackbar's action or close button.
Escape Closes the snackbar while focus is inside it. Focus then returns to the element that triggered the action. The shortcut is not listened for on the document: that would steal it from the other components on the page.

Note: a snackbar with automatic dismissal may only contain a focusable element on one condition: that the countdown is paused for as long as that element holds focus, otherwise the bar would fade under the focus and drop it onto the document. An action the user may need to reach, an undo for instance, is not put on a timer at all, or stays achievable elsewhere in the interface.