WCAG Principle: Perceivable
Guideline 1.2: Time-based Media (Provide alternatives for time-based media)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 1.2.3?
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such
Video with audio and significant visual content should have an alternative form as such as a textual form (screenplay) or an audio description. An audio description supplements the audio portion with required information in presentations without video such as actions, characters, scene changes, and on-screen text that are not described or spoken in the main soundtrack. The screenplay provides full descriptions of all visual material, such as visual context, dialogue, actions, expressions, non-speech sounds, and descriptions of backgrounds etc. that are part of the story.
How does it make your website accessible?
Providing audio descriptions for synchronised media (video that includes audio) that describes all visual content allows every user to fully access the media, but more especially blind or low vision users.
Who benefits from audio descriptions:
- People who are blind or have visual impairments.
- People who have difficulty understanding moving images.
How to Meet Success Criterion 1.2.3
How to provide alternatives for time-based media:
- Provide a full transcription of the video content.
- Provide audio descriptions for the video content.
Helpful tips for developers:
Make sure the audio descriptions are high quality and easy to understand. Use clear, concise language and avoid using jargon or complex terms.
Ensure that the audio descriptions are synchronized with the visual content. This will help ensure that the listener can follow along with what is happening on the screen.
Provide audio descriptions for all important visual content on your website, including images, videos, and other media.
Make it easy for users to access the audio descriptions. This might include providing a button or link that allows users to turn the audio descriptions on or off as needed, or providing instructions on how to access the audio descriptions through a separate device.
How to test if you’ve met compliance:
Compare the alternative (audio description or screenplay) with the synchronized media.
Make sure the dialogue in the alternative matches the dialogue in the synchronized media and includes sound descriptions.
Check that the alternative for time-based media includes descriptions of the actions and expressions of the characters (people, animals, etc).
If the alternative is on a separate page, ensure that it is properly linked in a way users can easily find and access it.
Bad and Good Examples (Video and developer code)
BAD Code Snippet
<figure>
<div class="video"> <video id="main_video" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>
</figure>This code includes a video with sound but does not provide any alternative for people who are blind or have low vision to understand the visual content of the video.
On the other hand, consider the video of Disney’s ‘Frozen’ trailer with good example of audio description and the code example below:
Good Code Snippet
<figure>
<div class="video"> <video id="main_video" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video-description.mp3" type="audio/mp3" aria-describedby="description">
</video>
<div id="description">Audio description track</div>
</div>
<details>
<summary aria-controls="transcript_content" tabindex="0" aria-expanded="false" id="show-hide-transcript">Transcript</summary>
<div id="transcript_content" aria-live="off" aria-atomic="true" ariarelevant="all" tabindex="0" aria-expanded="false" role="article">
<!-- Include Video Transcript Here -->
</div>
</details>
</figure>
This code includes a new <source> element for the audio description track and uses the aria-describedby attribute to associate the audio description track with the main video. The <div> element with the id of “description” provides a label for the audio description track.
It’s important to note that this code is just one example of how you could provide audio descriptions for a video on your website. There are many other ways to implement audio descriptions, and the specific approach you choose will depend on your needs and the design of your website.
Frequently Asked Questions
What is audio description in accessibility?
Audio description in accessibility is a means to provide verbal descriptions of action and key visual elements in visual media (e.g. movies, TV shows) for people who are blind or have low vision. It can be provided as a separate audio track that can be turned on or off as desired.
Why audio description is important?
Audio description is important because it makes visual media more accessible to people who are blind or have low vision, allowing them to fully participate in and enjoy the media. It helps these individuals to better understand and interpret the action and events happening on screen, and to fully engage with the content.
What is the difference between audio and audio description?
The difference between audio and audio description is that audio is the natural sound that is part of a visual media, such as the dialogue and sound effects in a movie, while audio description is a verbal description of the action and key visual elements happening on screen, such as the appearance and actions of characters and the setting.
Does audio description mean subtitles?
No, audio description does not mean subtitles. Subtitles are a written transcription of the dialogue, sound effects, and music in a video, usually displayed at the bottom of the screen for the viewer to read. Audio description, on the other hand, involves a narrator providing a verbal description of the action and key visual elements happening on screen, in between the natural dialogue of the program.
What is the difference between closed captions and audio descriptions?
The difference between closed captions and audio descriptions is that closed captions are text alternatives while audio descriptions are audio alternatives. Closed captions are text versions of the audio in a video, usually displayed at the bottom of the screen. They are primarily intended to make the content of the video more accessible to people who are deaf or hard of hearing.
Audio descriptions are verbal descriptions of the action and key visual elements in a video, intended to make the content more accessible to people who are blind or have low vision. They are typically provided in between the natural dialogue of the video and describe what is happening on screen.
