• Success Criterion 1.2.2
  • Conformance level A

Caption Button Missing or Unusable in the Video Player

1.2.2 — Captions (Prerecorded)

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Caption track present but not enabled/selectable in the custom player (no CC control, or control not keyboard-accessible — also 2.1.1).

Example 

<div class="player-controls">
  <div class="cc-toggle" onclick="toggleCaptions()">CC</div>
</div>

Why it matters

A keyboard-only user trying to turn on captions for a size-guide video can tab right past the CC control, since it's a div that only responds to a mouse click.

How to test

Look for a CC button on the custom player: if the caption track exists but there's no way to turn it on, or the button itself isn't reachable by keyboard, it fails.

How to fix

Caption controls need to be real, focusable, labeled buttons, not clickable divs that only a mouse can operate.

<div class="player-controls">
  <button type="button" class="cc-toggle" aria-pressed="false" onclick="toggleCaptions(this)">
    Captions
  </button>
</div>

Outcome

A keyboard-only shopper tabs to the captions button, presses Enter, and reads the size guide as it plays.

Who is affected

Keyboard-only users and screen reader users can't discover or activate the caption track, even though captions exist behind the scenes.

Learn more

Related scenarios