• Success Criterion 4.1.2
  • Conformance level A

Live Value Update With No Way for Screen Readers to Detect It

4.1.2 — Name, Role, Value

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Live-updating values (counters, cart totals) changing without any programmatic notification path where the control's value is the thing changing.

Example 

<div class="amount-stepper" role="spinbutton" aria-valuenow="50" tabindex="0">
  <button onclick="decreaseAmount()">-</button>
  <span id="amountDisplay">$50</span>
  <button onclick="increaseAmount()">+</button>
</div>
<!-- clicking + or - updates amountDisplay's text and an internal JS variable,
     but never touches the spinbutton's aria-valuenow -->

Why it matters

A screen reader user increasing the transfer amount keeps hearing the original $50, risking a transfer for the wrong amount.

How to test

Change a control's value (e.g., a cart total, a counter) and check whether a screen reader is informed via appropriate role/value semantics or a live region — silent updates fail.

How to fix

Update aria-valuenow, and aria-valuetext, in the exact function that changes the displayed amount.

function increaseAmount() {
  const stepper = document.querySelector('.amount-stepper');
  const newValue = Number(stepper.getAttribute('aria-valuenow')) + 10;
  stepper.setAttribute('aria-valuenow', newValue);
  stepper.setAttribute('aria-valuetext', `$${newValue}`);
  document.getElementById('amountDisplay').textContent = `$${newValue}`;
}

Outcome

A customer increases the transfer to $60 and hears the new amount confirmed immediately.

Who is affected

Screen reader users adjusting a transfer amount with the stepper cannot confirm the amount actually changed.

Learn more

Related scenarios