• Success Criterion 4.1.3
  • Conformance level AA

Quantity Stepper Value Change Never Announced to Screen Readers

4.1.3 — Status Messages

Scenario

Setting

A childcare-booking service's scheduling page

What’s wrong

Quantity stepper / value-adjustment feedback (cart quantity, computed totals reacting to input) not announced.

Example 

<div class="stepper">
  <button onclick="decreaseChildren()">-</button>
  <span id="childCount">2</span>
  <button onclick="increaseChildren()">+</button>
</div>
<!-- childCount's text updates on click, with no role="status" or aria-live,
     so the running total is silent -->

Why it matters

A parent adjusting the number of children for a booking hears no confirmation of the new count and may submit the wrong number.

How to test

Change a quantity stepper (cart quantity, computed total) with a screen reader running: if the updated value isn't announced, it fails.

How to fix

aria-atomic="true" makes sure the whole new number is announced, not just a changed digit.

<div class="stepper">
  <button onclick="decreaseChildren()">-</button>
  <span id="childCount" role="status" aria-live="polite" aria-atomic="true">2</span>
  <button onclick="increaseChildren()">+</button>
</div>

Outcome

A parent hears "3" confirmed immediately after tapping the plus button.

Who is affected

Screen reader users setting how many children to book cannot confirm the stepper's value changed.

Learn more

Related scenarios