WCAG 2.2 Demo SuiteAudio Description (Prerecorded)
Audio description is provided for all prerecorded video content. At AA the text-alternative escape hatch allowed at 1.2.3 is removed — a real described audio track is required.
Who this affects
Blind and low-vision users. At AA the standard assumes they should be able to consume the video itself, not a separate document.
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.5
Open the failing example in a new tab
fail.html — the problem
<h1>A short tour of the shop</h1>
<!-- This is the subtle one. The page below satisfies 1.2.3 at Level A, because
1.2.3 accepts EITHER audio description OR a full text alternative - and a
text alternative is provided.
1.2.5 at Level AA removes that choice. At AA you must provide actual
AUDIO DESCRIPTION: a described audio track the user can listen to while
watching. A separate document is no longer sufficient.
FAILURE: there is no described audio track and no described version of the
video. A blind user is sent off to read a document instead of watching the
video with everyone else. -->
<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>
<details class="transcript">
<summary>Text alternative (satisfies 1.2.3 at Level A, but not 1.2.5 at AA)</summary>
<p>Five title cards with sound effects: the shop name; opening hours; reserve
online and collect within seven days; free delivery over 25 pounds; the web
address.</p>
</details>Meets 1.2.5
Open the passing example in a new tab
pass.html — the fix
<h1>A short tour of the shop</h1>
<!-- FIX 1: offer a described version the user can choose. Two common
implementations:
a) a separate described video file, selectable like a language track
b) a single file with an extra described audio track
Option (a) is used here because it works in every browser today. -->
<p>
<button type="button" class="button button--secondary" id="toggle"
aria-pressed="false">Play the audio described version</button>
</p>
<video controls width="640" id="player">
<source id="src" src="../../assets/media/shop-tour.mp4" type="video/mp4">
<track kind="captions" src="../../assets/media/shop-tour-captions.vtt"
srclang="en" label="English" default>
<!-- The descriptions track is correct markup and machine-readable, but no
mainstream browser speaks it aloud - so it supplements the described
version rather than replacing it. -->
<track kind="descriptions" src="../../assets/media/shop-tour-descriptions.vtt"
srclang="en" label="Audio description">
</video>
<p id="mode" role="status">Playing the standard version.</p>
<!-- FIX 2: a full transcript as well. Not required by 1.2.5, but it is what
serves deafblind users (and satisfies 1.2.8 at AAA), and it makes the
content searchable. -->
<details class="transcript">
<summary>Full transcript, including descriptions</summary>
<dl>
<dt>00:00</dt><dd>Title card: Riverline Books — A short tour. [Doorbell chimes.]</dd>
<dt>00:04</dt><dd>Opening hours: Monday to Friday 9am to 6pm; Saturday 10am to 4pm; Sunday closed.</dd>
<dt>00:08</dt><dd>Reserve online, collect in store within seven days. [Counter bell.]</dd>
<dt>00:12</dt><dd>Free delivery on orders over 25 pounds. [Telephone rings four times.]</dd>
<dt>00:16</dt><dd>riverlinebooks.example — Thanks for visiting. [Doorbell chimes.]</dd>
</dl>
</details>
<!-- The cheapest way to pass 1.2.5 is to never need it: write the script so
the narration already says everything that appears on screen. A video
whose audio is self-sufficient requires no description at all - and it is
a better video for everyone listening while doing something else. -->How to test it
Confirm a described audio track exists and is selectable. Play it and verify descriptions fit the natural pauses in dialogue without talking over it.
-
Automated
Requires listening to the described track and judging its completeness.
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.5 Audio Description (Prerecorded) — the W3C explanation, intent and exceptions
- 1.2.5 in the WCAG 2.2 Recommendation — the normative wording