HTML: aria-live
The aria-live attribute tells assistive technology how to announce content that changes without a page reload.
What you will learn
- How to announce a dynamic status message
- When to use polite or assertive
- How to avoid overwhelming users with repeated announcements
Polite status message
<p aria-live="polite" id="status"></p>document.querySelector('#status').textContent = 'Results updated';polite waits until the user’s current interaction is finished before announcing the change. It is a good default for search results, chat updates, and save confirmations.
Assertive messages
<p aria-live="assertive" role="alert">Payment failed.</p>Use urgent announcements sparingly. Interrupting the current announcement can be disruptive, so reserve assertive for information that requires immediate attention.
Common mistakes
- Do not put an entire frequently changing page inside a live region.
- Update the text of an existing live region so assistive technology can detect the change.
- Do not use assertive for every notification; choose the least disruptive value that works.