Perceivable · 1.2 Time-based Media
All prerecorded video with sound, and all prerecorded video-only content, must have a full text alternative that presents the visual and audio information in order, much like a detailed screenplay.
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.
Open the text version under the player and read it without watching. Fails offers captions only, with no text version.
A short travel guide video.
A short travel guide video.
The tools follow the version you last used.
What happened
Why it passes
The text version reads like a script: every line Sara says, plus what is on screen, such as the red M signs and the route on the map. A deafblind reader using braille gets the whole trip.
Why it fails
There are only captions. They give Sara's words, but "these signs" and "this line" point at things a reader never sees, and there is no text to read on its own.
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="/travel/airport-to-city.mp4"></video><p>In this video, Sara shows you how to get from the airport to the city by metro.</p>A summary is not a media alternative. It leaves out the signs to follow, the ticket price and the route.
Passes
Live preview
<section aria-labelledby="trip-text"> <h3 id="trip-text">Text version: from the airport to the city</h3> <p>Sara: Welcome! Here is the quickest way from the airport to the city center.</p> <p>[Signs show a white M on a red square, with an arrow down the escalator.]</p> <p>Sara: Follow these signs to the metro, one floor down.</p> <p>[A ticket machine. Sara taps English, then Buy a card.]</p> <p>Sara: Buy a card here. It costs fifty cents, and you can top it up.</p></section>Descriptions of the picture sit in order between the lines of speech, so the text works on its own, without the video.
Fails
Live preview
<video controls src="/travel/airport-to-city.mp4"> <track kind="captions" src="/travel/airport-to-city.en.vtt" srclang="en" label="English"></video><p><a href="/travel/airport-to-city.en.vtt" download>Download the captions</a></p>The caption file holds only what is heard. It says nothing about the signs, the ticket machine or the map that the video shows.
Passes
Live preview
<video controls src="/travel/airport-to-city.mp4"> <track kind="captions" src="/travel/airport-to-city.en.vtt" srclang="en" label="English"></video><p><a href="/travel/airport-to-city/text/">Read the full text version, with descriptions of everything shown</a></p>Captions stay for viewers, and the link right below the player leads to the full script, so readers do not have to hunt for it.
Why it matters
Deafblind people using braille, and people who find text easier than video, get the full content of the media, including what is shown and what is heard.
W3C: Understanding 1.2.8Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures