- Success Criterion 4.1.3
- Conformance level AA
Live Region Whose Content Loads Before It’s Ready to Announce
4.1.3 — Status Messages
Scenario
Setting
A used-car marketplace's listing filter
What’s wrong
Live region present but broken: injected with content simultaneously with creation (missed by assistive technology), aria-live (code that makes screen readers announce updates) on element replaced wholesale, or display:none toggling that suppresses announcement.
Example
<div id="cart-status">Item added</div> <!-- silent DOM update --> Why it matters
Screen-reader users who need spoken confirmation of saves, errors, and results.
How to test
Inspect the live region in DevTools: if content is injected into the element at the same moment the element itself is created, some screen readers miss the announcement — check the region exists in the DOM before content is added.
How to fix
The status text must be wired as a live region (code that makes screen readers announce updates)/status role so screen readers announce it automatically without moving focus.
<div id="cart-status" role="status" aria-live="polite">Item added</div>role="status" with aria-live announces the update to screen reader users without moving their focus.
Outcome
On a used-car marketplace's listing filter, this barrier is gone for screen-reader users who need spoken confirmation of saves, errors — they can complete the task without hitting this wall.
Who is affected
Screen-reader users who need spoken confirmation of saves, errors, and results.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Status Update Shown Visually but Never Wired for Screen Readers
- Cart Confirmation Toast With No Live Region Announcement
- Search Result Count That Updates Silently on Every Filter
- Autosave ‘Saved’ Indicator With No Live Announcement
- Loading Spinner With No Programmatic Busy or Status State
- Error Toast With No Alert Role and No Focus Movement