• Success Criterion 4.1.3
  • Conformance level AA

Search Result Count That Updates Silently on Every Filter

4.1.3 — Status Messages

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Search result counts ("42 results") updating silently on filter.

Example 

<div class="filter-panel">...</div>
<p id="resultCount">128 results</p>
<!-- selecting a size filter re-renders the product grid and updates resultCount's text via innerText,
     with no aria-live anywhere near it -->

Why it matters

A shopper filtering by size hears nothing when the count drops from 128 to 6, and may not realize the filter applied.

How to test

Apply a filter with a screen reader running: if the updated result count ('42 results') isn't announced, it fails.

How to fix

Keep the live region's markup in place across re-renders; replacing the whole element resets it and breaks the announcement.

<p id="resultCount" role="status" aria-live="polite">128 results</p>

Outcome

A shopper hears "6 results" right after picking a size and knows the filter worked.

Who is affected

Screen reader users narrowing a clothing search cannot tell how many items match their chosen size and color.

Learn more

Related scenarios