WCAG 2.2 Guideline “1.2.2 Subtitles (Pre-recorded)” Level A

Introduction

WCAG 2.2’s “1.2.2 Subtitles (Pre-recorded)” guideline requires that subtitles be provided for all pre-recorded audio content in synchronized media (content where audio and video are synchronized). This ensures that users, including those with hearing impairments or those in environments where sound is difficult to hear, can still access the content.

This article explains the importance of subtitles and how to implement them with practical examples, designed for those starting to learn HTML, CSS, and JavaScript.

1. Basic Rules of “1.2.2 Subtitles”

According to this guideline, pre-recorded audio content in synchronized media must meet the following requirements:

• Text that accurately reflects the audio content must be provided.
• The subtitles should be synchronized with the audio.

Subtitles must not only cover dialogue but also include significant sounds or effects, such as applause or door knocks.

2. How to Implement Subtitles

To implement subtitles in HTML, the <track> element is used. This element is used to add subtitle files to a video.

Basic Implementation

HTML Example

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track src="example.vtt" kind="subtitles" srclang="ja" label="日本語">
  Your browser does not support the video element.
</video>

Explanation

• The <track> element specifies the subtitle file.
• kind="subtitles" indicates that it is a subtitle, and srclang specifies the language of the subtitle (in this case, Japanese with ja).
• The src attribute contains the path to the VTT file (e.g., example.vtt) that holds the subtitle content.

Creating a VTT File

A VTT file is created in the WebVTT (Web Video Text Tracks) format. Below is an example.

Example of a VTT file (example.vtt)

WEBVTT

00:00:00.000 --> 00:00:05.000
こんにちは、これはウェブアクセシビリティの説明動画です。

00:00:05.001 --> 00:00:10.000
字幕は、聴覚障害のある方を含むすべての人に役立ちます。

Explanation

• Each section specifies the “start time –> end time” for the subtitles.
• Text describes the dialogue or important sounds in the video.

Customization (Using CSS for Design Adjustments)

Once you add subtitles to a video, browsers may apply default styles. You can use CSS to customize the appearance of the subtitles.

CSS Example

video::-webkit-media-text-track-display {
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  color: white; /* White text color for subtitles */
  font-size: 16px; /* Subtitles font size */
  text-shadow: 1px 1px 2px black; /* Add shadow to subtitles for better readability */
}

Switching Subtitles with JavaScript

Using JavaScript, you can implement functionality to dynamically switch between multiple subtitle languages.

HTML & JavaScript Example

<video id="video" controls>
  <source src="example.mp4" type="video/mp4">
  <track id="track" src="example-ja.vtt" kind="subtitles" srclang="ja" label="日本語">
  <track src="example-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

<select id="languageSelector" onchange="changeSubtitle()">
  <option value="ja">日本語</option>
  <option value="en">English</option>
</select>

<script>
  function changeSubtitle() {
    const video = document.getElementById("video");
    const track = document.getElementById("track");
    const selectedLang = document.getElementById("languageSelector").value;

    track.src = selectedLang === "ja" ? "example-ja.vtt" : "example-en.vtt";
    video.load();
  }
</script>

Explanation
When the user selects a language from the dropdown menu, the subtitle track changes. This provides an accessible video experience for users who speak different languages.

3. Benefits of Providing Subtitles

By adhering to “1.2.2 Subtitles,” the following users benefit:

• Users with hearing impairments: They can access the content through subtitles even if they cannot hear the audio.
• Users in environments where they cannot hear the audio: For example, those in noisy environments or places where sound cannot be used.
• Language learners: Subtitles allow them to understand parts of the content that might be difficult to hear.

For example, offering subtitles in online educational courses helps create an equal learning environment for students with different backgrounds.

Conclusion

WCAG 2.2’s “1.2.2 Subtitles (Pre-recorded)” is a fundamental guideline for making synchronized media accessible.
By adding subtitles to videos, you make content available to a wider range of users.

Using the <track> element in HTML and VTT-formatted subtitle files allows for easy implementation. Even if you’re just starting with web development, focusing on providing subtitles is an essential step towards building an accessible website.

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