Provide captions for all video content with audio

WCAG 1.2.2
Captions (Prerecorded)

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If a video has audio, it must have captions. No exceptions.

Why this matters and how to fix it

Why this matters

Captions are essential for deaf and hard-of-hearing users to understand video content. They also support comprehension in noisy or muted environments and help non-native speakers follow spoken language accurately.

How to fix this issue

Provide synchronized captions that include all spoken dialogue and meaningful sound effects. For HTML5 video, add a <track kind="captions"> element referencing a properly formatted .vtt caption file.

Automated detection · Manual review recommended

Developer guidance

Auto-generated captions are usually inaccurate and must be reviewed. Verify captions reflect timing, speaker changes, and non-speech audio cues. Ensure captions are enabled and discoverable in custom video players.

Code examples

Incorrect Implementation

<video src='intro.mp4' controls></video>

Correct Implementation

<video controls>
  <source src='intro.mp4'>
  <track kind='captions' src='intro-en.vtt' srclang='en' label='English'>
</video>

Real-World Examples

Before

<video class="promo" controls src="promo.mp4"></video> <!-- Users who can't hear get no information -->

After

<video class="promo" controls>
  <source src="promo.mp4">
  <track kind="captions" src="promo-en.vtt" srclang="en" label="English captions">
</video>

CSS Example (Guidance)

/* Style captions for readability */
video::cue {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1rem;
  text-shadow: 1px 1px 2px #000;
  padding: 2px 4px;
  border-radius: 2px;
  line-height: 1.2;
}

Manual testing

  1. 1. Check if the video contains audio (speech, narration, or important sound effects).
  2. 2. Inspect the <video> element for a <track kind="captions"> element.
  3. 3. Open the .vtt file and confirm captions are meaningful and synchronized.
  4. 4. Play the video in the UI and ensure captions can be turned on/off.
  5. 5. Verify captions include relevant sound descriptions, not only dialogue.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance