WCAG 2.2 Guideline “1.2.7 Extended Audio Description (Pre-Recorded)” Level AAA

Introduction

WCAG 2.2’s “1.2.7 Extended Audio Description (Pre-Recorded)” applies to pre-recorded video content that contains extensive visual information, where regular audio descriptions are insufficient. Extended audio descriptions involve pausing the video playback to insert detailed explanations of the visuals, ensuring users with visual impairments can fully comprehend the content.

This article explains how to implement extended audio descriptions using HTML, CSS, and JavaScript, with a beginner-friendly approach.

1. What Is Extended Audio Description?

Unlike regular audio descriptions that fit into silent moments of a video, extended audio descriptions are used when:

• Silent moments are too short to accommodate explanations.
• The video contains complex or abundant visual information that requires detailed narration.

Extended audio descriptions pause the video to insert these explanations.

2. Methods for Providing Extended Audio Descriptions

a. Providing a Separate Version with Extended Audio Descriptions

Create a new version of the video that includes extended audio descriptions and allow users to choose it.

HTML Example

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

Explanation

• A new video file is created, embedding extended audio descriptions and appropriate pauses.
• Editing software is used to add descriptions and control playback timing.

b. Controlling Playback with JavaScript

You can dynamically insert extended audio descriptions during playback using JavaScript.

HTML and JavaScript Example

<video id="mainVideo" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>
<button id="playWithDescription">Play with Extended Descriptions</button>

<script>
  const video = document.getElementById("mainVideo");
  const descriptionTimings = [
    { time: 5, description: "The screen displays the text 'Spring Landscape'." },
    { time: 10, description: "Cherry blossoms in full bloom are shown against a mountain backdrop." },
  ];

  document.getElementById("playWithDescription").addEventListener("click", () => {
    video.currentTime = 0;
    video.play();

    descriptionTimings.forEach(item => {
      setTimeout(() => {
        video.pause();
        alert(item.description); // You can replace this with a text-to-speech function or other audio output
        video.play();
      }, item.time * 1000);
    });
  });
</script>

Explanation

• The video pauses at specified times to provide descriptions through an alert or audio playback.
• descriptionTimings makes it easy to manage and edit the description details.

c. Providing an Extended Audio Description Track

Use the <track> element to include extended audio descriptions as a separate track.

HTML Example

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

WebVTT File Example (extended-description.vtt)

WEBVTT

00:00:05.000 --> 00:00:10.000
The screen displays the text 'Spring Landscape.'

00:00:10.001 --> 00:00:15.000
Cherry blossoms in full bloom are shown against a mountain backdrop.

Explanation

• Use kind="descriptions" to indicate that the track contains audio descriptions.
• WebVTT manages timing and content for the descriptions.

3. Design and Implementation Tips for Extended Audio Descriptions

When implementing extended audio descriptions, keep the following in mind:

1. Accurate Timing
   Ensure the video pauses and resumes naturally for a seamless user experience.
2. User Control
   Provide options to enable or disable extended audio descriptions, allowing for flexible interaction.

4. Accessibility Benefits

Providing extended audio descriptions helps:

• Users with Visual Impairments: Understand complex visuals or fast-paced content through detailed narration.
• A Broader Audience: Make video content more inclusive and comprehensible.

Conclusion

WCAG 2.2’s “1.2.7 Extended Audio Description (Pre-Recorded)” is a Level AAA guideline designed to make video content fully accessible, even for visually complex media.

• Offering separate extended audio description versions or implementing dynamic descriptions ensures an inclusive experience.
• Using HTML and JavaScript, you can create accessible content with minimal effort.

Start integrating extended audio descriptions today to ensure your content is welcoming and accessible to everyone!

For an easy way to improve web accessibility, check out UUU Web Accessibility, a tool designed to simplify accessibility implementation.