• Success Criterion 1.2.2
  • Conformance level A

Captions Cut Off or Overlapping On-Screen Text

1.2.2 — Captions (Prerecorded)

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Captions truncated by player UI or overlapping essential on-screen text.

Example 

<video src="demo.mp4"></video>

Why it matters

Deaf and hard-of-hearing viewers, and anyone watching video without sound.

How to test

Play the video: if captions get cut off by player chrome or overlap with on-screen text/graphics, it fails.

How to fix

Synchronized captions must be provided covering all dialogue, speaker identification, and important sounds.

<video src="demo.mp4">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English">
</video>

A <track> element with kind="captions" surfaces synchronized text for dialogue and important sounds.

Outcome

On a language-learning app's lesson screen, this barrier is gone for deaf and hard-of-hearing viewers — they can finish what they came here to do.

Who is affected

Deaf and hard-of-hearing viewers, and anyone watching video without sound.

Learn more

Related scenarios