Glossary · Accessibility term

Toast notification

Also called: Snackbar, flash message

A toast notification is a short message that appears, usually to confirm something worked, and takes itself away on a timer. The timer is what people argue about, and the argument is normally aimed at the wrong thing. How long it stays is not the test. W3C's own worked example is a five-second toast that conforms, because the same information sits elsewhere on the page. Where it does not, that timer becomes a time limit the person has to be able to control. Three rules meet here. Whether it is announced at all, which is rule 4.1.3. Whether the timing can be adjusted, which is 2.2.1 at Level A. And whether it should be on a timer at all, which is 2.2.3 at Level AAA, where W3C's advice is to avoid alerts that disappear by themselves.

In practice

A screen reader user hears nothing unless the message reaches them some other way, and there is no such thing as a toast role. Two roles do this job on nearly every site. A status region is polite and waits for the current announcement to finish, and that is what a save confirmation should be. An alert region is assertive and interrupts, and reaching for it when the message is not urgent is the thing ARIA tells authors not to do, though W3C has not published a numbered failure for it yet.

For a status region, put it on the page before the message goes into it. Assistive technology announces changes to a live region, so a component that mounts the container and the text in the same render often produces a correctly marked-up toast that says nothing at all. An alert is the exception, because ARIA asks the browser to fire a system alert event when the alert is created, so that one is built to speak on arrival.

The message must not take focus, and that constraint is what makes the whole pattern awkward. An alert exists to catch attention without interrupting what somebody is doing, so it cannot solve its own announcement problem by grabbing the cursor. Where the timer does set a real time limit, the rule offers three ways out and a dismiss button is not one of them. Let the person turn the limit off, let them adjust it, or warn them and give them at least 20 seconds to extend it, and W3C ranks turning it off first.

Why it matters

This is the quiet version of a status message failure. Nothing looks broken. The confirmation appeared, and it appeared and went for anybody not watching that corner of the screen at that moment. Somebody magnifying the page is often reading a window that does not include that corner at all, so the notice arrives and leaves outside their view. The useful question is not how many seconds. It is whether the information exists anywhere else. If it does, the toast can go. If the only record that a payment succeeded was a message lasting four seconds, you have put a time limit on knowing whether you have been charged.

Five seconds can pass

W3C's own example is a mail client that shows a toast for five seconds when a message arrives, and it conforms. The inbox is right there, and the arrival does not vanish with the notice. The same toast, carrying the only record that an order went through, sets a time limit and has to answer to the rule that governs them.

Where this shows up on the site

Related terms

Knowing the word is the easy part.

Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.

Run the free scan