WCAG 2.2 Guideline “1.2.3 Audio Description or Media Alternative (Prerecorded)” Level A

Introduction

WCAG 2.2’s “1.2.3 Audio Description or Media Alternative (Prerecorded)” requires providing audio descriptions or media alternatives for prerecorded synchronized media (content where audio and video are synchronized). This ensures that visually impaired users can understand the content of videos.

This article explains the standard in detail, with practical examples, making it easy for beginners in HTML, CSS, and JavaScript to understand.

1. Purpose and Scope of the Guideline

The primary goal of this guideline is to make video content accessible without relying on vision.
This is achieved by supplementing video content through:

1. Audio Descriptions
   Provide an audio track that narrates essential visual information (e.g., text, actions, background).

2. Media Alternatives
   Provide detailed descriptions of video content in text or other formats (e.g., an audio-only track).

2. Implementing Audio Descriptions

Audio descriptions supplement visually significant information in videos with audio, allowing users to enable this option when playing the video.

Implementation in HTML

Basic Example

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track src="audio-description.vtt" kind="descriptions" srclang="en" label="Audio Description">
  Your browser does not support video playback.
</video>

Explanation

• The <track> element with kind="descriptions" specifies the audio description.
• The src attribute points to a WebVTT file containing the audio description.

Example of a WebVTT File

Below is an example of an audio description written in WebVTT format:

WebVTT File Example (audio-description.vtt)

WEBVTT

00:00:00.000 --> 00:00:05.000
Beautiful mountains stretch across the screen, with a sunset in the background.

00:00:05.001 --> 00:00:10.000
A hiker reaches the summit, raises a flag, and smiles.

Explanation

• The timestamps specify when the description should be played.
• This allows visually impaired users to understand the video’s content.

3. Implementing Media Alternatives

If audio descriptions are not feasible, provide media alternatives, such as detailed text descriptions of the video content.

Example in HTML

Adding Media Alternatives to a Video

<video controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support video playback. Below is a textual description of the content.
</video>
<p>Video content: This video showcases stunning mountain landscapes. It features a hiker reaching the summit and raising a flag, with the sunset shining in the background.</p>

Explanation

• Use the <p> tag to describe the video content in text.
• This is a suitable approach when audio descriptions are unavailable.

4. Customization and Applications

Dynamic Switching with JavaScript

Providing a way for users to toggle between audio descriptions and text descriptions enhances accessibility.

Example: Enabling Audio Descriptions

<video id="video" controls>
  <source src="example.mp4" type="video/mp4">
  <track id="desc" src="audio-description.vtt" kind="descriptions" srclang="en" label="Audio Description">
</video>
<button onclick="toggleDescriptions()">Toggle Audio Description</button>

<script>
  function toggleDescriptions() {
    const track = document.getElementById("desc");
    track.mode = track.mode === "showing" ? "hidden" : "showing";
  }
</script>

Explanation
This button allows users to toggle audio descriptions on or off, offering flexible options to meet their needs.

5. Accessibility Benefits

Following this guideline ensures content is accessible to the following users:

• Visually Impaired Individuals: Can understand video content via audio descriptions.
• Temporarily Vision-Impaired Individuals: For example, those in dark environments or using small screens.
• Users Likely to Miss Details: Media alternatives help them grasp the video’s intent.

For instance, adding audio descriptions to a tourism promotional video enables visually impaired individuals to appreciate the attractions.

Conclusion

WCAG 2.2’s “1.2.3 Audio Description or Media Alternative (Prerecorded)” is a crucial standard for making video content accessible.

• By providing audio descriptions or media alternatives, users can understand video content without relying on vision.
• Using HTML <track> elements and WebVTT files makes implementation straightforward, even for beginners.

Let’s create accessible web content that everyone can enjoy!

Our company offers UUU Web Accessibility to simplify the integration of web accessibility. If you’re interested in improving accessibility, please check out the details!