Success Criterion 4.1.3
Conformance level AA
W3C reference F103

Status Update Shown Visually but Never Wired for Screen Readers

4.1.3 — Status Messages

Scenario

Setting

A news outlet's article page

What’s wrong

Status updates ('Saved', 'Loading', '5 results') appear on screen but aren't wired as status messages — screen readers stay silent.

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

Trigger a status update (save, search, error) and check DevTools: if there's no role="status"/aria-live region wired to it, it won't be announced automatically.

How to fix

Wrap the status area in role="status" (code that makes updates announced)/aria-live (code that makes screen readers announce updates) so updates are announced automatically.

<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 news outlet's article page, this barrier is gone for screen-reader users who need spoken confirmation of saves, errors — they reach the same outcome without extra effort.

Who is affected