Skip to lesson content
WCAG 1.2.2 · Level AHard30 min readMultimedia

Videos Without Captions

Overview

All pre-recorded video with audio must have synchronized captions. This serves deaf/hard-of-hearing users and anyone in a noisy or silent environment.

Captions make video usable for the roughly 1-in-8 people with hearing loss—and for the far larger group watching on mute, in a noisy place, or learning the language. WCAG 1.2.2 requires synchronized captions for all pre-recorded video with audio, and missing captions are a frequent basis for ADA complaints against media-heavy sites. Captions also boost SEO and engagement, since the transcript becomes indexable text and most social video is watched without sound.

WCAG Criterion:1.2.2
Conformance Level:Level A
Difficulty:Hard
Time to fix:~30 min
Category:Multimedia

The Problem

This pattern is inaccessible — avoid it.

[ AVOID ]
<video src="demo.mp4" controls></video> <!-- No captions — fails WCAG 1.2.2 -->

The Fix

Use this accessible pattern instead.

[ CORRECT ]
<video controls> <source src="demo.mp4" type="video/mp4"> <track kind="captions" src="demo.en.vtt" srclang="en" label="English" default> </video>

Step-by-step

  1. Generate a WebVTT (.vtt) or SRT (.srt) caption file for each video.

  2. Add a <track> element inside <video> with kind="captions".

  3. Use auto-captioning tools (YouTube, Otter.ai, Rev) then manually review for accuracy.

  4. For third-party embeds (YouTube, Vimeo), enable captions in the player settings.

  5. Captions must be synchronized and include non-speech sounds ('[applause]', '[music]').

Common Mistakes

  • Shipping video with no <track> captions at all.

  • Relying on auto-generated captions without reviewing them for accuracy.

  • Captions that omit speaker changes and non-speech sounds ([music], [applause]).

  • Burning captions into the video so they can’t be turned off or restyled.

How to Test for It

  • Mute the video and confirm you can follow it entirely from the captions.

  • Check captions are synchronized and accurate (aim for over 99%).

  • Confirm captions can be toggled and aren’t permanently burned in.

Framework Notes

How to apply this fix in your stack.

[ REACT ]
<video controls> <source src={videoSrc} type="video/mp4" /> <track kind="captions" src={captionSrc} srcLang="en" label="English" default /> </video>

FAQ

Related lessons