ARIA Live Region
实时区域
Aliases:实时区域实时播报播报区域读屏播报aria-livelive region
What is it
A reserved region on the page that speaks dynamic updates to screen readers without moving focus. Saved states, result counts, async validation — the "it changed on screen but focus didn't move" class of news that blind users simply miss without it.
Name disambiguation
aria-live is non-interrupting background speech; a modal is focus-stealing forced reading — both deliver news, one whispers it, one blocks the door.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Operation outcomes — saved, copied, submitted
- Async results and filter counts with no focus change
- Form errors that must be announced outside the field
✕ When not to use
- Announcing field errors instead of focusing the field
- High-frequency inserts that flood the screen reader queue
- Blocking errors that must interrupt, sent polite only
Variants
Polite live
礼貌播报
aria-live="polite" — waits for a pause, right for ordinary results
Assertive alert
紧急打断
aria-live="assertive" / role="alert" — interrupts at once, critical warnings only
Status
状态播报
role="status" — implicit polite, suits loading and done states
Implementation
aria-liverole="status"role="alert"aria-atomicThe live region must already be in the DOM (an empty container is fine) before its text changes — freshly created regions are often not announced. role="status" and role="alert" imply their own aria-live, so do not stack both. aria-atomic="true" re-reads the whole region; clear then write on rapid updates so messages do not merge. Use sr-only when hiding visually while staying readable.
Platform API
aria-liverole="status"role="alert"aria-atomicIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| WCAG | 4.1.3 Status Messages |
| MDN | ARIA live regions |
Related concepts
A small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsUsed withAn inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsUsed withChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed withNot to be confused with
modal seizes focus to force reading; aria-live voices updates without taking focus away.