WCAG 2.2 Guideline “1.2.8 Media Alternative (Pre-Recorded)” Level AAA

Introduction

WCAG 2.2’s “1.2.8 Media Alternative (Pre-Recorded)” requires providing a complete text alternative for pre-recorded synchronized media and pre-recorded video-only media. This guideline aims to achieve Level AAA accessibility, supporting users with visual or auditory impairments by making media content fully understandable without relying on sight or sound.

This article offers a beginner-friendly guide to implementing media alternatives using HTML, CSS, and JavaScript.

1. Importance and Scope of Media Alternatives

Media alternatives provide textual or other forms of substitutes for time-based media like videos and audio, ensuring users can understand the content regardless of their sensory abilities.

Targeted Media Types

• Synchronized Media: Content with synchronized audio and video, such as narrated videos.
• Video-Only Media: Visual content without accompanying audio, such as silent videos.

2. Methods for Providing Media Alternatives

a. Text Alternatives for Synchronized Media

For synchronized media, provide a text alternative that describes all visual and auditory information in the video.

HTML Example

<video controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>
<p>
  The complete content of this video is available as text:  
  <a href="media-alternative.html">Read the video content</a>
</p>

Explanation

• The <p> element includes a link to the text alternative.
• The text alternative should describe narration, visuals, and sound effects in detail.

b. Text Alternatives for Video-Only Media

For video-only media, provide a detailed description of the visual content.

HTML Example

<video controls>
  <source src="video-only.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>
<p>
  A detailed description of this video is available here:  
  <a href="video-only-description.html">Read the video description</a>
</p>

Explanation

• The linked text should fully describe the visuals in the video, making it accessible to users with visual impairments.

c. Embedding Alternatives Directly in HTML

Place the text alternative near the media to ensure easy access.

HTML Example

<object data="example.mp4" type="video/mp4">
  <p>The content of this video:  
  The video shows a spring garden with cherry blossoms fluttering in the wind.</p>
</object>

Explanation

• Use the <object> element to include fallback text directly in the HTML.
• Even if the video fails to play, users can still access the content.

3. Enhancing Media Alternatives with CSS and JavaScript

a. Providing Text Alternatives in a Popup

Use JavaScript to display text alternatives in a popup when requested.

HTML and JavaScript Example

<video controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>
<button id="showDescription">Show Media Alternative</button>
<div id="description" style="display: none; background-color: #f0f0f0; padding: 10px;">
  <p>Content of the video: The video shows a garden in spring, with petals fluttering in the breeze.</p>
</div>

<script>
  document.getElementById("showDescription").addEventListener("click", () => {
    const description = document.getElementById("description");
    description.style.display = description.style.display === "none" ? "block" : "none";
  });
</script>

Explanation

• A button toggles the visibility of the media alternative.
• This approach allows users to access the alternative content only when needed.

4. Key Considerations When Creating Media Alternatives

• Include All Content: The text alternative must cover all information from the media, including narration, visuals, and sound effects.
• Clear Link Text: Use descriptive link text, such as “Read the video content,” instead of generic phrases like “Click here.”
• Placement Matters: Ensure the alternative content is located near the media for easy access.

5. Accessibility Benefits

Adhering to this guideline enhances usability for:

• Users with Visual Impairments: Access detailed descriptions of visuals.
• Users with Hearing Impairments: Understand narration and sound effects through text.
• Users in Restricted Environments: Access media content without requiring audio or video playback.

Conclusion

WCAG 2.2’s “1.2.8 Media Alternative (Pre-Recorded)” ensures complete accessibility by requiring detailed textual alternatives for time-based media.

• Providing text alternatives can be easily achieved using HTML, CSS, and JavaScript.
• By implementing media alternatives, you create a more inclusive web experience for all users.

Begin your journey toward building accessible websites by incorporating these practices!

For an easy way to improve web accessibility, explore UUU Web Accessibility, designed to simplify accessibility integration.