← Back to Channel hub

ARIA live regions — announce updates without stealing focus

Live regions help screen reader users hear important UI updates (like “Saved” or “3 results loaded”) without moving focus. Use them to communicate status — not to narrate every keystroke.

Theme cycle: DEFAULT → COLOR-SAFE → HIGH CONTRAST

Polite vs assertive

role="status" (usually aria-live="polite") is best for non-urgent updates: “Saved.”, “Filter applied.”, “3 results loaded.”
role="alert" is best for urgent issues: “Connection lost.”, “Payment failed.” Use it sparingly.

Both should announce updates without stealing focus.

Checklist

Prefer aria-live="polite" / role="status" for most updates.
Use role="alert" only for truly urgent, actionable problems.
Keep messages short and specific (what happened + what to do next, if needed).
Don’t announce on every keystroke (typing should stay quiet and usable).
Avoid moving focus unless there’s a strong reason (e.g., blocking error that prevents progress).
Use aria-atomic="true" when you want the whole message read as a unit.
Make the same information visible as text, not screen-reader-only.

Common pitfalls

Spam: announcing every character typed (“Searching for a…”, “Searching for ab…”, …).
Too chatty: long paragraphs in a live region — users can’t control the pace.
Focus theft: moving focus to a toast/status message instead of announcing it.
Ambiguity: “Error occurred” (what error? what now?).
Overusing alerts: assertive announcements for routine events (annoying + can interrupt speech).

Testing tips (imperfect, but better than guessing)

Try at least one screen reader (e.g., VoiceOver on macOS/iOS, NVDA on Windows). Results can vary.
Verify that the announcement happens without focus moving.
Check repeat announcements (sending “Saved.” twice should still be announced).

Different screen readers and browsers have different heuristics; test your critical paths.

Demo link

Try the micro-demo: ARIA live regions — demo