WCAG 2.2 Demo SuiteAudio Description or Media Alternative (Prerecorded)
Prerecorded video in synchronised media has either an audio description of the visual information or a full text alternative for the whole presentation.
Who this affects
Blind and low-vision users, who miss any information shown but never spoken — on-screen text, a demonstrated action, a chart, a facial reaction.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 1.2.3
Open the failing example in a new tab
fail.html — the problem
<h1>A short tour of the shop</h1>
<!-- FAILURE: the video is captioned, so it passes 1.2.2 - and teams often stop
there, believing the video is now accessible. It is not.
Every piece of actual INFORMATION in this clip is on screen and never
spoken: the opening hours, the reservation policy, the delivery threshold,
the web address. Played with the screen off, a blind user hears a doorbell,
a bell and a telephone, and learns nothing else.
There is no described audio track and no text alternative. -->
<video controls width="640">
<source src="../../assets/media/shop-tour.mp4" type="video/mp4">
<track kind="captions" src="../../assets/media/shop-tour-captions.vtt"
srclang="en" label="English" default>
</video>Meets 1.2.3
Open the passing example in a new tab
pass.html — the fix
<h1>A short tour of the shop</h1>
<video controls width="640">
<source src="../../assets/media/shop-tour.mp4" type="video/mp4">
<track kind="captions" src="../../assets/media/shop-tour-captions.vtt"
srclang="en" label="English" default>
<!-- A descriptions track is the correct markup and is machine-readable.
Be warned: no major browser currently speaks these cues aloud, so on its
own it is NOT enough to claim conformance. It is included here so you can
see the syntax and because it costs nothing. -->
<track kind="descriptions" src="../../assets/media/shop-tour-descriptions.vtt"
srclang="en" label="Audio description">
</video>
<!-- FIX: 1.2.3 lets you satisfy it EITHER with audio description OR with a
full text alternative for the whole presentation. The text alternative is
used here because it is the option a small team can actually deliver, and
it is what the descriptions track would say.
Note the difference from a caption file: this covers BOTH what is heard
and what is seen, and reads as a document in its own right. -->
<details class="transcript" open>
<summary>Text alternative for the whole presentation</summary>
<p>A sequence of five title cards, with sound effects.</p>
<dl>
<dt>00:00</dt><dd>Title card: <strong>Riverline Books — A short tour</strong>.
[A shop doorbell chimes twice.]</dd>
<dt>00:04</dt><dd>Card: <strong>Opening hours</strong> — Monday to Friday, 9am to 6pm;
Saturday, 10am to 4pm; Sunday, closed.</dd>
<dt>00:08</dt><dd>Card: <strong>Reserve online</strong> — collect in store within seven days.
[A counter bell rings.]</dd>
<dt>00:12</dt><dd>Card: <strong>Free delivery</strong> on orders over 25 pounds.
[A telephone rings four times, unanswered.]</dd>
<dt>00:16</dt><dd>Card: <strong>riverlinebooks.example</strong> — Thanks for visiting.
[The doorbell chimes as the door closes.]</dd>
</dl>
</details>
<!-- Cheapest fix of all, and the one most people miss: if the narration simply
SAID the information that is on screen, no description would be needed at
all. Writing the script so the audio is self-sufficient removes the problem
instead of remediating it. -->How to test it
Watch the video with the screen off. If you lose information, the visual content is not described. Confirm either a described audio track or a text alternative covering both dialogue and visuals.
-
Automated
Requires watching the media and judging whether the visuals carry information the audio does not.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 1.2.3 Audio Description or Media Alternative (Prerecorded) — the W3C explanation, intent and exceptions
- 1.2.3 in the WCAG 2.2 Recommendation — the normative wording