“Toast” messages are small temporary notifications like “Saved.” or “Copied to clipboard.” They’re common in games and web apps because they don’t interrupt what you’re doing.
The catch: if a toast is visual-only, a screen reader user might not learn that anything happened. Keyboard focus usually stays on the button you pressed, and the toast may appear somewhere else on screen.
A simple fix: a live region
Put the toast text in a live region so assistive tech can announce it. One common pattern is:
role="status"(typically polite announcements)aria-live="polite"(announce when idle)aria-atomic="true"(announce the whole message as a unit)
This lets people get confirmation without moving focus or opening a modal dialog. It’s especially helpful for short confirmations: saved, copied, equipped, updated.
Notes
- Don’t rely on color alone (e.g., “green toast = success”). Include clear text.
- Keep the message short and specific (“Saved settings” is better than “Success”).
- Don’t spam live regions; frequent toasts can become noisy. Use them for meaningful events.