WCAG 2.2 Demo SuiteMedia Alternative (Prerecorded)
A full text alternative is provided for all prerecorded synchronised media and for prerecorded video-only media.
Who this affects
Deafblind users, who reach content through a refreshable braille display and cannot use captions or audio description. Also users who prefer to read or search rather than watch.
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.8
Open the failing example in a new tab
fail.html — the problem
<h1>A short tour of the shop</h1>
<!-- FAILURE: captions AND audio description are both provided, so this passes
1.2.2, 1.2.3 and 1.2.5. It still fails 1.2.8, because there is no full
TEXT alternative for the presentation.
Who that leaves out: DEAFBLIND users. Captions are visual, so they are
useless without sight. Audio description is auditory, so it is useless
without hearing. A deafblind user reads with a refreshable braille
display, which needs TEXT - and there is none here.
It also leaves out anyone who would rather read than watch, anyone on a
slow connection, and every search engine. -->
<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>
<track kind="descriptions" src="../../assets/media/shop-tour-descriptions.vtt"
srclang="en" label="Audio description">
</video>Meets 1.2.8
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>
<track kind="descriptions" src="../../assets/media/shop-tour-descriptions.vtt"
srclang="en" label="Audio description">
</video>
<!-- FIX: a complete text alternative for the whole presentation, on the page
and reachable as text. It is open by default here, because hiding the only
route a deafblind user has behind a control is poor practice.
What makes this a MEDIA ALTERNATIVE rather than a caption file:
- it covers what is SEEN and what is HEARD, in one document
- it reads as prose, in order, and makes sense without the video
- it identifies speakers and sounds
- it is text, so a braille display can render it -->
<div class="transcript">
<h2>Full text alternative</h2>
<p>A twenty-second sequence of five title cards, with sound effects and no speech.</p>
<dl>
<dt>00:00</dt>
<dd>A title card reads <strong>Riverline Books — A short tour</strong>, dark blue
text on a pale background with a blue rule across the top and bottom.
A shop doorbell chimes twice, high then low, as if a customer has entered.</dd>
<dt>00:04</dt>
<dd>A card headed <strong>Opening hours</strong> lists: Monday to Friday, 9am to 6pm;
Saturday, 10am to 4pm; Sunday, closed. No sound.</dd>
<dt>00:08</dt>
<dd>A card reads <strong>Reserve online</strong>, and below it,
<em>Collect in store within 7 days</em>. A small counter bell rings once.</dd>
<dt>00:12</dt>
<dd>A card reads <strong>Free delivery</strong>, and below it,
<em>on orders over 25 pounds</em>. A telephone rings four times and is not answered.</dd>
<dt>00:16</dt>
<dd>A closing card reads <strong>riverlinebooks.example</strong> with
<em>Thanks for visiting</em> beneath it. The doorbell chimes again, low then
high, as the door closes.</dd>
</dl>
</div>
<!-- Note the relationship between the 1.2.x criteria. A single well-written
media alternative satisfies 1.2.8 at AAA and can also be used to satisfy
1.2.1 and 1.2.3 at Level A. If you are only going to produce one artefact
for a video, produce this one - it does the most work. -->How to test it
Confirm a complete text document covering dialogue, speakers, and visual information, reachable from the media, and readable as a standalone narrative.
-
Automated
Requires comparing the document against the media.
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.8 Media Alternative (Prerecorded) — the W3C explanation, intent and exceptions
- 1.2.8 in the WCAG 2.2 Recommendation — the normative wording