CodePark<!-- in the page from the start, empty -->
<div role="status" class="visually-hidden" id="cart-msg"></div>
<script>
// later, after "Add to cart" succeeds:
document.getElementById("cart-msg").textContent =
"Added to cart. 3 items in your cart.";
</script>
A live region is an element whose text changes are read aloud by screen readers, even though focus stays somewhere else. Use it for updates the user didn't move to, such as "Added to cart", "12 results found" or "Saved".
The options:
aria-live="polite": the screen reader waits until it finishes what it is saying. Use this for most updates.aria-live="assertive": the screen reader interrupts the user. Use it only for urgent things, like "Your session ends in 1 minute".role="status": a polite live region. Good for results counts and "Saved" messages.role="alert": an assertive live region. Good for important errors.
Rules that catch people out:
- The region must exist before the text changes. Render it empty when the page loads, then change its text. A region added to the page already holding text is often not announced.
- Keep messages short and don't fire many in a row, or they become noise.
- A live region does not move focus. If the user must act, move focus instead.
- A live region makes screen readers announce text changes without moving focus.
- Polite waits for the screen reader to finish, and assertive interrupts.
role="status"is polite androle="alert"is assertive.- The live region must already be in the page before its text changes.
- Use assertive only for urgent messages, and keep messages short.