How to build an accessible Toast in React
Toasts render into a labelled region; non-critical ones use role="status" with aria-live="polite", while destructive variants escalate to role="alert" with aria-live="assertive" so urgency is conveyed without stealing focus.
When to use a Toast
- Confirming that a background or just-completed action succeeded or failed (e.g. "Saved")
- Brief, transient feedback that should auto-dismiss without interrupting the task
- Non-blocking notifications that can stack and disappear on their own
When not to use it
- A persistent, inline message tied to a specific region of the page — use Alert
- Feedback that requires the user to acknowledge or decide before continuing — use Modal or AlertDialog
Keyboard interactions
Role status, verified at WCAG 2.2-AA.
Tab
Common mistakes
Avoid: toast({ title: "Delete this account?", duration: 0 })
Prefer: <AlertDialog title="Delete this account?" />
Toasts auto-dismiss and are easy to miss; a destructive decision needs a blocking dialog the user must confirm
Example
const { toast } = useToast()
toast({ title: "Saved", variant: "success" })