Live regions
Announce dynamic content with aria-live and aria-atomic.
Live regions with aria-live
When dynamic content updates on a page, a screen reader should announce it automatically. The aria-live attribute does this. It takes three values: polite, assertive and off.
polite waits until the screen reader is idle; it does not interrupt. assertive announces at once and cuts in; it suits urgent errors. For informative updates, prefer polite. To make a region live, use aria-live or role="status" / role="alert".
aria-atomic and built-in roles
aria-atomic decides whether the whole live region or only the changed node is read. aria-atomic="true" reads the entire region as one unit; aria-atomic="false" reads only the changed node.
Some roles already imply a live region: status announces politely, alert announces urgently. In that case aria-live is not needed. For example, <p role="alert"> reads an error message at once.
Exercise Write a form and a live status region
Add a <form> inside body. Put a <label> and an <input> inside; the label's for must match the input's id. After the form, outside it, add a <div>; this div should carry role="status", aria-live="polite" and aria-atomic="true". Inside it put a non-empty paragraph, for example 'Form saved'.
Show example solution
<body>
<form action="/save" method="post">
<label for="name">Name</label>
<input id="name" type="text" name="name" required>
</form>
<div role="status" aria-live="polite" aria-atomic="true">
<p>Form saved</p>
</div>
</body>Test yourself
-
An error message must be announced at once; which aria-live?
- off
- polite
- assertive
- static
Show answer
assertive — Correct. assertive cuts the screen reader off at once and reads the error right away; ideal for urgent messages.
-
Write the live region attribute
<div role="status" aria-live="polite" ____="true">2 items added to your cart.</div>Show answer
<div role="status" aria-live="polite" aria-atomic="true">2 items added to your cart.</div> -
Match each value to its behaviour
- polite
- Politely, when idle
- assertive
- Urgent, at once
- off
- Not announced
- role="status"
- Implies polite
-
What does aria-atomic="true" do?
- Hides the region
- Reads the whole region as one unit
- Reloads the region
- Empties the region
Show answer
Reads the whole region as one unit — Correct. aria-atomic="true" reads the entire region as one unit; it avoids confusion on partial updates.