Understanding ARIA Live Regions
A live region is a part of a web page that updates dynamically, and screen readers are notified of the change without the user needing to move focus. This is useful for alerts, status messages, or content that changes in real time.
aria-live – Tells assistive technology how assertively to announce updates. Values: polite (waits for user to pause) or assertive (interrupts immediately).
aria-atomic – If true, announces the entire region when any part changes; if false, only the changed text is announced.
aria-relevant – Specifies what kinds of changes should be announced (e.g., additions, removals, text).
Live regions let screen reader users stay informed about important changes without losing their place on the page.
A chat application using <div aria-live="polite"> to announce new messages.
A form error message inside <div aria-live="assertive"> so it is read immediately.
A stock ticker or live score update inside <div aria-live="polite" aria-atomic="true">.
Use aria-live only for important updates, not for every minor change.
Choose polite for non-urgent information and assertive only for critical alerts.
Avoid overusing live regions, as too many announcements can overwhelm users.
Keep live region messages short and clear.
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
