Toast notifications — an accessibility checklist

A toast (or “snackbar”) is a small, usually temporary message that appears without blocking your workflow—often near the bottom of the screen.

• Good for: “Saved”, “Copied”, “Deleted (Undo)”, “You’re offline”.
• Not good for: critical errors that require immediate attention (use an error summary or a dialog).

Goal The user keeps typing / navigating where they were. The toast should not hijack focus.

• Don’t call .focus() on the toast when it appears.
• Do keep the toast outside the normal Tab order by default. Let users reach it intentionally (e.g., a “Notifications” landmark or a “View notification” button).
• Do ensure focus styles remain visible against the toast background.

If the toast conveys new information, many users will only hear it if it’s announced via a live region.

• Use a dedicated element like <div role="status" aria-live="polite" aria-atomic="true"> for routine updates (“Saved”, “Deleted”).
• Prefer polite unless it’s truly urgent.
• Keep announcements short, and avoid repeating the whole screen.

<!-- Visually hidden, but announced by screen readers -->
<div id="live" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>

<script>
function announce(text){
  // Clear first so consecutive messages get read reliably.
  live.textContent = "";
  setTimeout(() => live.textContent = text, 10);
}
</script>

• If the toast offers Undo or Dismiss, they must be actual interactive elements: <button> (or <a> if it navigates).
• Avoid “clickable text” (<span> with a click handler). It won’t be reliably keyboard- or SR-accessible.
• Make the action label explicit: Undo delete is clearer than Undo when multiple toasts can exist.
• If you add a keyboard shortcut (e.g., U), still keep the button. Shortcuts are optional, buttons are not.

Common failure auto-dismiss happens while the user is trying to act, or before a screen reader user can reach the toast.

• Best: don’t auto-dismiss when the toast contains an action (Undo). Let the user dismiss.
• If you must auto-dismiss:
  • Provide a Pause option (or extend time on interaction).
  • Never dismiss while focus is inside the toast.
  • Use a longer duration for actionable toasts (seconds, not a blink).

• Keep animations subtle. Avoid large movement that can distract or trigger vestibular discomfort.
• Disable slide/fade animations under @media (prefers-reduced-motion: reduce).

.toast{ animation: toastIn 160ms ease-out forwards; }
@media (prefers-reduced-motion: reduce){
  .toast{ animation: none; }
}

• Keyboard only: trigger a toast while focus is in a field. Ensure focus stays put. Ensure Undo/Dismiss can be reached and used.
• Screen reader smoke test: verify the toast message is announced once (not duplicated), and actions are labeled.
• Timer test: trigger a toast, wait, interact—make sure it doesn’t vanish mid-action.
• Reduced motion: enable reduced motion in OS settings and confirm the toast does not animate.

Try the paired demo: Toast notifications — spot the change (demo).