1.2.1 - Audio-only and Video-only (Prerecorded) - A
Intent
Make prerecorded (not live-streamed) audio-only and video-only content accessible through text transcript or media alternatives.
Who Benefits
- People who cannot see a video can listen to an alternative audio track or can have the transcript announced by a screen reader.
- People who cannot hear an audio track can read the transcript.
- People who cannot both see and hear can have the transcript perceived through a braille display.
- People who cannot play the audio because they are in a noisy or quiet environment where they cannot hear it or do not want to disturb others can read the transcript.
- People having difficulties understanding audio or video information due to language or cognitive issues, for example, can benefit from reading the transcript in parallel.
- People searching for audio or video content in search engines or on the page itself can find it thanks to the transcript.
- People who do not want to spend time listening to the audio or watching the video can just read the transcript or its parts.
- People with low connection speed who do not want to download larger audio or video files or to pay for bandwidth by downloading large files can read the transcript.
Media Alternatives
This criterion covers two types of media alternatives.
Audio-only
Audio recordings of speeches, podcasts, songs, or other sounds.
Provide a text transcript that conveys the same information as the audio, so people who cannot hear, for example, can read it and understand the information they cannot get from the audio, such as dialogues, important sound effects, or even timestamps.
<audio>
<source src="track.mp3" type="audio">
</audio>
<h3>Transcript</h3>
<p>[00:00:00] (John) Hello! In this video, we will cover keyboard access and visual focus.</p>
<p>[00:00:05] Many people cannot use a mouse and rely on the keyboard to interact with web content.</p>
(the full transcript text continues...)
Video-only
Silent movies, animations, or other video content without sound.
Provide a text transcript or an audio description that conveys the same information as the video. People who cannot see, for example, can listen to a screen reader announcing the transcript, so they can listen to the text content. Or, they can listen to the audio description that describes all the relevant visual information in the video, such as actions, characters, scene changes, or on-screen text.
<a href="mars-landing.mp4">Mars landing video</a>
<a href="mars-landing-audio-description.mp3">Audio description of "Mars Landing"</a>
Exceptions
The alternative does not have to be provided if the content itself is the alternative. For instance, if video-only content has an audio track as an alternative, the audio track itself does not need to have a transcript.
Examples
Correct Usage
The following example shows the correct usage or implementation of accessibility.
Example 1: Transcript of Podcast
A button with a "play" icon and the visible text "Play Episode 1: Introduction to Web Accessibility" followed by a short description of the episode and a link to the transcript below followed by a download link and a share button.
<button class="btn--play">Play Episode 1: Introduction to Web Accessibility</button>
<p>Get to know what web accessibility is and what impact it has.</p>
<a href="/episode-01-transcript">Transcript</a>
<a href="/episode-01.mp3">Download podcast as MP3 (1.45 MB)</a>
<button>Share the episode</button>
Incorrect Usage
The following example shows incorrect usage or implementation of accessibility.
Example 1: Transcript of Podcast
A button with a "play" icon and the visible text "Play Episode 1: Introduction to Web Accessibility" followed by a short description of the episode, a download link, and a share button.
There is no mention of a transcript anywhere, so the podcast is inaccessible to people who need the transcript.
<button class="btn--play">Play Episode 1: Introduction to Web Accessibility</button>
<p>Get to know what web accessibility is and what impact it has.</p>
<a href="/episode-01.mp3">Download podcast as MP3 (1.45 MB)</a>
<button>Share the episode</button>
Test Your Knowledge
What are the requisites for the transcript's content?
The transcript must have identified speakers (if there is more than one) and must cover all dialogues and important sound effects. It may also contain timestamps when necessary.
What technique would you use to link media with the transcript?
Place a link to the transcript, or put the transcript itself as close as possible to the media content.