The HTML aria-live attribute
The aria-live attribute marks a region whose content updates should be announced by screen readers. Values: polite (announce when idle), assertive (interrupt immediately), or off. Essential for status messages, notifications and async results.
Overview
The aria-live attribute marks a region whose dynamic updates should be announced by assistive technology.
It configures (or relates to) a live region: an area whose dynamic updates are announced to screen-reader users without moving focus. The region must already exist in the DOM before its contents change, and live regions should be used sparingly so a flood of announcements does not overwhelm the user.
Like all ARIA, aria-live changes only the accessibility tree (what assistive technology perceives), never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div aria-live="polite" id="status"></div>Values
| Value |
|---|
| off | polite | assertive |
Example
<div aria-live="polite" id="cart-status">Item added to your cart.</div>Best practices
- Follow the first rule of ARIA: use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Put the live region in the DOM first, then change its contents so the update is announced.
- Use polite announcements for most updates; reserve assertive for genuinely urgent ones.
- Use live regions sparingly to avoid overwhelming the user with announcements.
Accessibility
Live regions are how screen-reader users learn about things that happen without a page reload: "Item added to cart", form save confirmations, search results counts. Get the politeness right: overusing assertive constantly interrupts the user, while polite respects their flow. Pair it with aria-atomic and aria-relevant to fine-tune what gets read.