Perceivable · 1.2 Time-based Media
Prerecorded video with sound must have synchronized captions covering all dialogue and important non-speech audio, such as who is speaking and meaningful sound effects. Media that is a clearly labeled alternative for text is exempt.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Play the video and keep your eyes on the picture. In Passes the words appear on it as they are spoken; in Fails you can only read a separate transcript.
A short cooking video from our recipe collection.
A short cooking video from our recipe collection.
The tools follow the version you last used.
What happened
Why it passes
Captions appear on the picture in time with the speech, so a deaf viewer can follow each step while watching Anna's hands.
Why it fails
There are no captions. A deaf viewer must choose between watching the video and reading the transcript, and cannot match each step to the picture.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<video controls src="/video/flatbread.mp4"></video><p><a href="/recipes/flatbread/transcript/">Read the transcript</a></p>A transcript is not in sync with the picture. Without captions, deaf viewers cannot read the words and watch the steps at the same time.
Passes
Live preview
<video controls src="/video/flatbread.mp4"> <track kind="captions" src="/video/flatbread.en.vtt" srclang="en" label="English" default></video><p><a href="/recipes/flatbread/transcript/">Read the transcript</a></p>kind="captions" gives the player a track it shows in time with the speech, and default turns it on unless the viewer picks another. The file must cover all speech and meaningful sounds.
Fails
Live preview
const video = document.querySelector("#flatbread-video");const track = video.addTextTrack("captions", "English", "en");track.mode = "showing";track.addCue(new VTTCue(12, 15, "Oh no, what's that?"));track.addCue(new VTTCue(15, 18, "Right, the pan is too hot."));Hearing viewers hear a smoke alarm, but the captions skip it. A deaf viewer cannot tell why the cook suddenly stops.
Passes
Live preview
const video = document.querySelector("#flatbread-video");const track = video.addTextTrack("captions", "English", "en");track.mode = "showing";track.addCue(new VTTCue(11, 12, "[Smoke alarm beeps]"));track.addCue(new VTTCue(12, 15, "Anna: Oh no, what's that?"));track.addCue(new VTTCue(15, 18, "Anna: Right, the pan is too hot."));The alarm is captioned in brackets and each line names the speaker, so deaf viewers get the same story as hearing viewers.
Why it matters
People who are deaf or hard of hearing can follow speech and sounds as the video plays, and captions also help anyone watching without sound.
W3C: Understanding 1.2.2Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures