WCAG 2.2 Guideline “1.2.5 Audio Description (Pre-Recorded)” Level AA

Introduction

WCAG 2.2’s “1.2.5 Audio Description (Pre-Recorded)” requires providing audio descriptions for pre-recorded video content. This guideline ensures accessibility for users with visual impairments or those who may struggle to understand visual information in videos.

Audio descriptions supplement important visual information (e.g., character movements, expressions, or on-screen text) with spoken explanations.

This article provides a beginner-friendly explanation with specific examples and implementation methods using HTML, CSS, and JavaScript.

1. Purpose and Scope of Audio Descriptions

Audio descriptions provide essential visual information to users, helping them comprehend:

• Videos with silent visual scenes or important visual storytelling elements.
• Details like facial expressions, gestures, and other critical visual cues.

2. Methods for Providing Audio Descriptions

a. Adding a Separate Audio Track (User-Selectable)

HTML Implementation Example

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

Explanation

• The <track> element links a subtitle file in WebVTT format that contains audio description.
• Setting kind="descriptions" informs the video player that this track contains audio descriptions.

b. Providing a Separate Version with Audio Descriptions

An alternative is to create a separate video that includes audio descriptions.

HTML Example

<p>The following video includes audio descriptions:</p>
<video controls>
  <source src="example-audio-description.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>

Explanation
This method provides users with a dedicated video file containing audio descriptions.

c. Extended Audio Descriptions

For videos with significant visual content, extended audio descriptions may be necessary. These pause the video playback to insert detailed explanations, ensuring all essential visual information is conveyed.

3. Creating WebVTT Files for Audio Descriptions

Audio descriptions can be provided in WebVTT format, specifying the visual information to be narrated.

Example of a WebVTT File

WEBVTT

00:00:00.000 --> 00:00:05.000
The screen shows "2024" with a clear blue sky in the background.

00:00:05.001 --> 00:00:10.000
The main character smiles and starts walking, with a large mountain in the background.

4. Using JavaScript for Advanced Interactivity

You can allow users to toggle audio descriptions dynamically using JavaScript.

HTML and JavaScript Example

<video id="video" controls>
  <source src="example.mp4" type="video/mp4">
</video>
<button id="descriptionToggle">Toggle Audio Description</button>

<script>
  document.getElementById("descriptionToggle").addEventListener("click", () => {
    const video = document.getElementById("video");
    const currentSource = video.src;
    video.src = currentSource.includes("description")
      ? "example.mp4"
      : "example-description.mp4";
    video.load();
  });
</script>

Explanation

• Users can toggle between the original video and the version with audio descriptions by clicking a button.
• This implementation is simple and user-friendly.

5. Accessibility Benefits

By adhering to this guideline, you can create an inclusive experience for diverse users:

• Visually Impaired Users: Access critical visual cues via audio descriptions.
• Enhanced Information Delivery: Combine visual and auditory information to improve content understanding for all users.

Conclusion

WCAG 2.2’s “1.2.5 Audio Description (Pre-Recorded)” is a crucial standard for ensuring video content is accessible without relying solely on visuals.

• Providing separate audio tracks or description-enhanced video versions ensures all users can enjoy the content.
• Beginners can easily implement audio descriptions using HTML, CSS, and JavaScript.

Aim for an accessible web experience by integrating audio descriptions into your content strategy!

For a seamless way to enhance web accessibility, explore UUU Web Accessibility, designed to simplify accessibility integration.