• 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 

<div class="lesson-video">
  <video src="/lessons/spanish-greetings.mp4" controls>
    <track kind="captions" src="/lessons/spanish-greetings.vtt" srclang="en" default>
  </video>
  <!-- On-screen text overlay "Hola = Hello" is burned into the same
       bottom third of frame where the caption track renders -->
</div>

Why it matters

A deaf learner trying to see the vocabulary word "Hola" on screen finds the caption text overlapping it directly, so neither the word nor the caption is legible.

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

Plan caption placement into the video design itself, reserving a clear zone so captions never fight with on-screen text.

<div class="lesson-video">
  <video src="/lessons/spanish-greetings.mp4" controls>
    <track kind="captions" src="/lessons/spanish-greetings.vtt" srclang="en" default>
  </video>
</div>
<!-- Video re-exported with the vocabulary overlay moved to the top
     third of frame, leaving the bottom clear for captions -->

Outcome

A deaf learner reads both the vocabulary word and the caption clearly, without either one blocking the other.

Who is affected

Deaf and hard-of-hearing learners lose access to both the burned-in vocabulary text and the caption track whenever they collide on screen.

Learn more

Related scenarios