• Success Criterion 2.1.1
  • Conformance level A

Custom Video Player Controls Unreachable by Keyboard

2.1.1 — Keyboard

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Video player custom controls unreachable or inoperable by keyboard.

Example 

<div class="video-controls">
  <div class="play-btn" onclick="togglePlay()"></div>
  <div class="volume-btn" onmousedown="showVolumeSlider()"></div>
</div>
<!-- controls are div icons with only onclick/onmousedown, no tabindex or keydown -->

Why it matters

A patient tabbing through the refill form cannot pause or replay the inhaler-technique video, so they may miss instructions and misuse the device.

How to test

Tab through video player controls: if any control (play, seek, volume) can't be reached or activated by keyboard, it fails.

How to fix

Swapping the divs for real button elements restores focusability and keyboard activation without any extra key-handling code.

<button class="play-btn" onclick="togglePlay()" aria-label="Play video"></button>
<button class="volume-btn" onclick="showVolumeSlider()" aria-label="Volume"></button>

Outcome

A patient tabs to the play button and replays the inhaler instructions as many times as needed.

Who is affected

Keyboard-only users and switch-access users cannot control playback of a video embedded in the form flow.

Learn more

Related scenarios