Perceivable · 1.2 Time-based Media
Prerecorded video with sound must include audio description of important visual information that the soundtrack does not already convey. Unlike 1.2.3, offering a text alternative instead does not satisfy this criterion.
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.
Press play and listen without looking. In Passes the weight, price and discount code are read out; in Fails they only appear on screen.
Watch the product video before you buy.
Watch the product video before you buy.
The tools follow the version you last used.
What happened
Why it passes
In the pauses, a voice reads what appears on screen, including the price and the discount code. A blind shopper gets the same facts as everyone else, as the video plays.
Why it fails
The price, the weight and the code are shown but never spoken. A blind shopper has to leave the video and dig through a text version to find them.
Examples
Three 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/trail-30.mp4"> <track kind="captions" src="/video/trail-30.en.vtt" srclang="en" label="English"></video><p><a href="/products/trail-30/video-text/">Read a text version of this video</a></p>A full text version meets 1.2.3, but not this criterion. The price and the discount code are still shown only on screen in the video.
Passes
Live preview
<video controls src="/video/trail-30-described.mp4"> <track kind="captions" src="/video/trail-30-described.en.vtt" srclang="en" label="English"></video><p><a href="/video/trail-30.mp4">Watch without audio description</a></p>A narrator reads the on-screen weight, price and code in the pauses, so blind shoppers get them as the video plays.
Passes
Live preview
const video = document.querySelector("#trail-video");const button = document.querySelector("#describe-toggle");button.addEventListener("click", () => { const on = button.getAttribute("aria-pressed") !== "true"; button.setAttribute("aria-pressed", String(on)); const time = video.currentTime; video.src = on ? "/video/trail-30-described.mp4" : "/video/trail-30.mp4"; video.currentTime = time; video.play();});An "Audio description" toggle button (aria-pressed) swaps in the described version at the same point, so viewers can find and choose it easily.
Why it matters
People who are blind or have low vision can follow actions, on-screen text and scene changes as the video plays, alongside everyone else.
W3C: Understanding 1.2.5Level AA
Level AA is the level most laws and policies require.
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