WCAG 2.2 Guideline “1.2.6 Sign Language (Pre-Recorded)” Level AAA

Introduction

WCAG 2.2’s “1.2.6 Sign Language (Pre-Recorded)” requires the provision of sign language interpretation for pre-recorded synchronized media (content with synchronized audio and video). This guideline, a Level AAA standard, ensures better accessibility for individuals with hearing impairments.

This article explains how to provide sign language interpretation in a way that’s easy to understand for beginners in HTML, CSS, and JavaScript, with specific examples and implementation methods.

1. Purpose of Providing Sign Language Interpretation

Many individuals with hearing impairments find sign language easier to understand than written text or captions. Including sign language interpretation in videos offers the following benefits:

• Accommodates users who primarily use sign language for communication.
• Improves comprehension by providing visual information alongside sign language.

2. Methods of Providing Sign Language Interpretation

a. Embedding Sign Language Interpreter in the Video

The simplest and most common method is to record the sign language interpreter as part of the video and embed it into the main content. This approach ensures that the interpretation is always visible, requiring no extra action from users.

HTML Example

<video controls>
  <source src="example-with-sign-language.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>

Explanation

• The video includes the interpreter as part of its content.
• Editing software is used to combine the main video with the interpreter’s footage.

b. Providing the Sign Language Interpreter as a Separate View

This method offers the sign language interpreter in a separate window or overlay, allowing users to toggle its display as needed.

HTML and JavaScript Example

<video id="mainVideo" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>
<video id="signLanguageVideo" controls style="display: none; width: 200px; position: absolute; bottom: 10px; right: 10px;">
  <source src="sign-language.mp4" type="video/mp4">
</video>
<button id="toggleSignLanguage">Show Sign Language</button>

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

Explanation

• The interpreter is provided as a separate video. Users can toggle its visibility as needed.
• The style="display: none;" attribute hides the video initially, and JavaScript manages its display state.

c. Synchronizing Videos with SMIL (Synchronized Multimedia Integration Language)

SMIL can synchronize the main video with the sign language video, but its use has declined with modern web standards. HTML5 and JavaScript are more commonly used for such purposes today.

3. Design and Placement of Sign Language Interpretation

To effectively display sign language interpretation, consider the following:

1. Ensure the interpreter’s video is large enough
   • The interpreter’s hands and facial expressions must be clearly visible.
2. Allow users to adjust display position
   • For overlay options, provide features to let users move or resize the interpreter’s video.

CSS Styling Example

#signLanguageVideo {
  width: 200px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 2px solid black;
  background-color: white;
}

4. Supporting Multiple Languages and Extensibility

Sign language varies across countries (e.g., Japanese Sign Language, American Sign Language). If your video includes multiple sign language options, provide users with a choice.

HTML and JavaScript Example

<video id="mainVideo" controls>
  <source src="example.mp4" type="video/mp4">
</video>
<select id="languageSelector">
  <option value="none">No Sign Language</option>
  <option value="japanese">Japanese Sign Language</option>
  <option value="asl">American Sign Language</option>
</select>
<div id="signLanguageContainer"></div>

<script>
  const signLanguages = {
    japanese: "japanese-sign-language.mp4",
    asl: "asl-sign-language.mp4"
  };

  document.getElementById("languageSelector").addEventListener("change", (event) => {
    const container = document.getElementById("signLanguageContainer");
    container.innerHTML = ""; // Clear existing sign language video
    if (event.target.value !== "none") {
      const video = document.createElement("video");
      video.src = signLanguages[event.target.value];
      video.controls = true;
      video.style.width = "200px";
      container.appendChild(video);
    }
  });
</script>

Explanation

• A dropdown (select tag) allows users to choose their preferred sign language.
• The selected video is dynamically displayed.

5. Accessibility Benefits

Providing sign language interpretation addresses the needs of the following users:

• Individuals with Hearing Impairments: Ensures those who primarily use sign language can fully understand video content.
• Multilingual Users: Offering multiple sign language options enhances global accessibility.

For example, adding sign language to educational video content ensures equal learning opportunities for students with hearing impairments.

Conclusion

WCAG 2.2’s “1.2.6 Sign Language (Pre-Recorded)” is a Level AAA guideline designed to make video content more accessible through sign language interpretation.

• You can implement this through embedding interpreters, offering separate views, or supporting multiple languages.
• Using HTML, CSS, and JavaScript, even beginners can create flexible solutions for providing sign language interpretation.

Take the first step towards creating inclusive web content by incorporating these practices!

For more information on implementing web accessibility, check out UUU Web Accessibility, a tool designed to make accessibility easy to integrate.