• 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 

<button onclick="saveArticle()">Save for later</button>
<span id="saveStatus"></span>
// JS: function saveArticle() { saveStatus.textContent = 'Saved to your reading list'; }
<!-- the span updates visually but has no role="status" or aria-live, so screen readers never announce it -->

Why it matters

A reader using a screen reader taps "Save for later" and gets no confirmation, so they may tap it repeatedly.

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

Add role="status", or aria-live="polite", to any element that receives confirmation text after an action.

<button onclick="saveArticle()">Save for later</button>
<span id="saveStatus" role="status" aria-live="polite"></span>

Outcome

A reader hears "Saved to your reading list" right after tapping the button.

Who is affected

Screen reader users saving articles for later cannot tell whether the save actually succeeded.

Learn more

Related scenarios