In plain English
Lots of things change on a store without the page reloading or focus moving: “Added to cart” pops up, a filter says “12 results”, a form shows “Saved”. A sighted user sees these. A screen-reader user, whose focus did not move, has no idea anything happened, unless you announce it.
The tool for this is a “live region”: a small piece of the page marked so that, whenever its text changes, the screen reader reads it out. No focus change, no interruption, just a quiet confirmation.
Who this is for
- Screen-reader users, who otherwise miss confirmations, counts, and inline errors entirely.
- Anyone, who benefits from knowing an action actually worked.
What “good” looks like
Announce updates through a live region.
<!-- Routine update: polite -->
<div role="status">Added to cart</div>
<!-- Urgent (error): assertive -->
<div role="alert">Payment failed. Check your card details.</div>
<!-- Result count that updates as filters change -->
<div role="status" aria-live="polite">12 products</div>Update the text inside these regions when the event happens, and the screen reader announces it automatically.
Where stores get it wrong
“Added to cart” toasts that only appear visually, filter counts that update silently, and inline form validation that a screen reader never hears. These are easy to miss because everything looks fine on screen; they show up on the common failures list once you test with a screen reader.