The HTML aria-busy attribute
The aria-busy="true" attribute marks an element as being updated, so assistive technology holds announcements until you set it back to false. It is mainly used to batch several changes to a live region into one announcement.
Overview
The aria-busy attribute indicates that an element is being updated and not yet ready to be announced.
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-busy 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-busy="true" id="list"> … </div>Values
| Value |
|---|
| true | false |
Example
<div aria-live="polite" aria-busy="false" id="feed"> … </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.