The HTML aria-atomic attribute
The aria-atomic attribute controls how much of a live region is announced when it updates: true reads the entire region, false (the default) reads only the changed part. Use it inside an aria-live region.
Overview
The aria-atomic attribute indicates whether a live region is announced as a whole or only the changed parts.
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-atomic 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" aria-atomic="true" id="count">0 results</div>Values
| Value |
|---|
| true | false |
Example
<div aria-live="polite" aria-atomic="true" id="results">12 results found</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.