• Success Criterion 4.1.3
  • Conformance level AA

Character Counter That Updates Only Visually While Typing

4.1.3 — Status Messages

Scenario

Setting

A ticket marketplace's seat-selection map

What’s wrong

Character counters/quota warnings updating visually only.

Example 

<textarea maxlength="200" oninput="updateCounter(this)"></textarea>
<span id="charCount">200 characters remaining</span>
<!-- updateCounter() rewrites charCount's text on every keystroke, with no aria-live,
     so the running total is silent -->

Why it matters

A screen reader user writing a special seating request has no idea how close they are to the limit until text gets cut off.

How to test

Watch a character counter or quota warning update while typing, with a screen reader running: if there's no announcement as it changes, it fails.

How to fix

A counter that announces on every keystroke can overwhelm speech output; throttle updates while staying informative.

<span id="charCount" role="status" aria-live="polite">200 characters remaining</span>
<!-- consider announcing only at milestones, such as every 20 characters, rather than every keystroke -->

Outcome

A ticket buyer hears "20 characters remaining" and wraps up their request before it's cut off.

Who is affected

Screen reader users typing special requests cannot track their remaining character count while typing.

Learn more

Related scenarios