WCAG 2.2 Guideline “1.2.4 Captions (Live)” Level AA
Introduction
WCAG 2.2’s guideline “1.2.4 Captions (Live)” requires providing real-time captions for synchronized media containing live audio. This guideline aims to accommodate individuals with hearing impairments as well as those in noisy environments watching live events, broadcasts, webinars, and similar content.
In this article, we’ll provide a beginner-friendly explanation of guideline “1.2.4 Captions (Live)” with specific methods and examples using HTML, CSS, and JavaScript.
1. The Importance of Live Captions
Live captions convert live audio into text displayed in real-time during a broadcast. This supports the following users:
- Individuals with hearing impairments: Enables them to receive information through text instead of audio.
- People in noisy environments: Allows comprehension of content even when audio is difficult to hear.
- Users watching without audio: Useful in quiet settings where audio playback isn’t possible.
2. Types of Live Captions
There are two main types of live captions:
-
Open Captions
- Always visible on the screen.
- Users do not need to toggle captions on or off.
-
Closed Captions
- Users can toggle captions on or off as needed.
- Commonly provided as a feature in video players.
3. Basic Implementation of Live Captions with HTML and JavaScript
a. Simple Live Caption Display
Here’s how to update captions in real-time using HTML and JavaScript.
Example: HTML and JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Captions Example</title>
<style>
#caption {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
font-size: 16px;
border-radius: 5px;
}
</style>
</head>
<body>
<video id="liveVideo" controls autoplay>
<source src="live-stream.mp4" type="video/mp4">
Your browser does not support live video.
</video>
<div id="caption">Captions will appear here...</div>
<script>
// Example logic for updating captions
const captions = [
{ time: 0, text: "Welcome! Today's topic is web accessibility." },
{ time: 10, text: "Let's begin with an overview of the basic guidelines." },
{ time: 20, text: "Feel free to send questions via chat." },
];
const captionDiv = document.getElementById("caption");
setInterval(() => {
const currentTime = Math.floor(document.getElementById("liveVideo").currentTime);
const currentCaption = captions.find(caption => caption.time === currentTime);
if (currentCaption) {
captionDiv.textContent = currentCaption.text;
}
}, 1000);
</script>
</body>
</html>
Explanation
- The
captionsarray defines the time and text for captions. - Captions are updated in real-time based on the video’s playback time.
b. Implementing Closed Captions
Closed captions allow users to toggle captions on or off.
Example: Toggle Captions On/Off
<button onclick="toggleCaptions()">Toggle Captions</button>
<script>
function toggleCaptions() {
const captionDiv = document.getElementById("caption");
captionDiv.style.display = captionDiv.style.display === "none" ? "block" : "none";
}
</script>
4. Technologies for Providing Live Captions
a. SMIL (Synchronized Multimedia Integration Language)
SMIL can synchronize and display a text stream for captions. However, with the widespread adoption of HTML5, direct use of SMIL has decreased.
b. Real-Time Speech Recognition with Web Speech API
The Web Speech API in JavaScript can transcribe live audio into text for captions in real-time.
Example: Simple Implementation
const recognition = new webkitSpeechRecognition();
recognition.lang = "en-US";
recognition.continuous = true;
recognition.onresult = (event) => {
const transcript = event.results[event.results.length - 1][0].transcript;
document.getElementById("caption").textContent = transcript;
};
recognition.start();
Note
The Web Speech API depends on browser compatibility and may not work in all environments.
5. Benefits for Accessibility
Providing live captions makes content more inclusive for a variety of users:
- Individuals with hearing impairments: Enables real-time understanding of live events or webinars.
- Multilingual support: Offering captions in multiple languages makes content accessible to international audiences.
- Noisy environments: Ensures comprehension even in situations where audio is inaudible.
Conclusion
WCAG 2.2’s guideline “1.2.4 Captions (Live)” is essential for making content containing live audio more accessible.
- HTML and JavaScript can be used to easily provide live captions.
- Features such as closed captions and real-time speech recognition enhance the user experience.
Take the first step toward accessible live streaming and create web content that everyone can use!
For more information on how to easily implement web accessibility, check out UUU Web Accessibility.