WCAG 2.2 Guideline 1.2.1 Audio-only and Video-only (Pre-recorded): A Beginner’s Guide

Introduction

WCAG 2.2 guideline “1.2.1 Audio-only and Video-only (Pre-recorded)” emphasizes the need to provide alternative information for audio or video content that is pre-recorded, so that users, including those with visual and auditory disabilities, can understand the content. This guideline ensures that all users can access content equally, regardless of their abilities or limitations.

In this article, we will explain this guideline in simple terms with practical examples and implementation methods, making it easy for beginners who are learning HTML, CSS, and JavaScript.

1. Audio-only Content (Pre-recorded)

For audio-only content, it is required to provide textual alternative information that describes the audio. This alternative information must accurately convey the information contained in the audio content.

Implementation Example

For instance, in the case of an audio lecture or podcast:

HTML Example

<audio controls>
  <source src="lecture.mp3" type="audio/mpeg">
  Your browser does not support the audio element. Please read the lecture content below.
</audio>
<p>Lecture content: This audio explains the basic principles of web accessibility...</p>

Explanation
The <audio> tag is used to play the audio, and the content of the audio is provided in text form. This allows users who may have difficulty hearing the audio to understand the content.

2. Video-only Content (Pre-recorded)

For video-only content, one of the following must be provided:

• Textual alternative that describes the video content, or
• Audio track that verbally describes the video content.

Implementation Example

For example, for a video showing tourist spots with no audio:

HTML Example (using text alternative)

<video controls>
  <source src="scenery.mp4" type="video/mp4">
  Your browser does not support the video element. Please read the video content below.
</video>
<p>Video content: This video shows beautiful coastal scenery, a sunrise, and birds flying.</p>

HTML Example (using an audio track)

<video controls>
  <source src="scenery.mp4" type="video/mp4">
  <track kind="descriptions" src="audio-description.vtt" srclang="ja" label="Audio Description">
</video>

Explanation
In order to make the video content accessible without relying on sight, detailed text descriptions or an audio description track is provided.

3. Technical Points to Keep in Mind

• Alternative information should be concise and accurate
  It is important to create alternative information that accurately conveys the content of the audio or video.

• Using CSS and JavaScript in combination
  You can enhance the design and usability by using CSS and JavaScript to toggle the visibility of alternative information.

JavaScript Example (button to display alternative information)

<button onclick="toggleDescription()">Show Alternative Information</button>
<div id="description" style="display:none;">
  <p>Video content: This video shows a sunset by the seaside with calm waves and birds flying.</p>
</div>

<script>
  function toggleDescription() {
    const description = document.getElementById("description");
    description.style.display = description.style.display === "none" ? "block" : "none";
  }
</script>

Explanation
Using JavaScript to toggle the display of alternative information when the button is pressed can improve the user experience.

4. Benefits of Following This Guideline

By following this guideline, the following users can enjoy the content:

• Users with hearing impairments (who can understand the content through text alternatives even if they cannot hear the audio).
• Users with visual impairments (who can understand the content through audio descriptions even if they cannot see the video).
• Users in restricted environments (who cannot listen to audio or view video but can rely on alternative information).

For example, a company training video with visual descriptions or text alternatives for the audio can create an inclusive learning environment for all employees.

Conclusion

WCAG 2.2’s “1.2.1 Audio-only and Video-only (Pre-recorded)” is a basic rule for making media content accessible.
For audio content, provide a text alternative that explains its content. For video content, ensure either a text alternative or an audio description is available. By doing this, you can offer a web experience that is friendly to all users.

Even if you’re new to web development, implementing this rule will help you build accessible websites!

We offer a simple way to integrate web accessibility with the UUU Web Accessibility Widget Tool. If you’re interested in improving accessibility, please check out the details.