Hướng dẫn WCAG 2.2 “1.2.4 Phụ đề (trực tiếp)” Mức AA
Mở đầu
WCAG 2.2 “1.2.4 Phụ đề (trực tiếp)” yêu cầu cung cấp phụ đề theo thời gian thực cho phương tiện đồng bộ có chứa âm thanh trực tiếp. Hướng dẫn này nhằm mục đích hỗ trợ những người khiếm thính hoặc những người xem nội dung như sự kiện trực tiếp, phát sóng, hội thảo trên web trong môi trường có nhiều tiếng ồn.
Bài viết này sẽ giải thích dễ hiểu về hướng dẫn “1.2.4 Phụ đề (trực tiếp)” dành cho người mới bắt đầu, kèm theo các phương pháp cụ thể và ví dụ triển khai sử dụng HTML, CSS và JavaScript.
1. Sự cần thiết của phụ đề trực tiếp
Phụ đề trực tiếp chuyển đổi âm thanh xảy ra trong quá trình phát trực tiếp thành văn bản theo thời gian thực và hiển thị trên màn hình. Điều này hỗ trợ các nhóm người dùng sau:
- Người khiếm thính: Có thể nhận thông tin qua văn bản thay vì âm thanh.
- Người ở trong môi trường nhiều tiếng ồn: Có thể hiểu nội dung ngay cả khi khó nghe được âm thanh.
- Người xem không sử dụng âm thanh: Hữu ích khi không thể phát âm thanh ở những nơi yên tĩnh.
2. Các loại phụ đề trực tiếp
Phụ đề trực tiếp chủ yếu có hai loại sau:
-
Phụ đề mở (Open Caption)
- Phụ đề luôn được hiển thị.
- Người dùng không cần chuyển đổi bật hoặc tắt phụ đề.
-
Phụ đề đóng (Closed Caption)
- Phụ đề có thể bật hoặc tắt theo nhu cầu.
- Thường được cung cấp như một tính năng của trình phát video.
3. Triển khai cơ bản phụ đề trực tiếp bằng HTML và JavaScript
a. Hiển thị phụ đề trực tiếp đơn giản
Dưới đây là cách cập nhật phụ đề theo thời gian thực bằng HTML và JavaScript.
Ví dụ về HTML và JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ví dụ về phụ đề trực tiếp</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">
Trình duyệt này không hỗ trợ phát trực tiếp.
</video>
<div id="caption">Phụ đề sẽ được hiển thị ở đây...</div>
<script>
// Ví dụ về logic cập nhật phụ đề đơn giản
const captions = [
{ time: 0, text: "Chào mừng bạn! Chủ đề hôm nay là về khả năng truy cập web" },
{ time: 10, text: "Trước tiên, chúng ta sẽ giới thiệu các hướng dẫn cơ bản" },
{ time: 20, text: "Nếu có câu hỏi, hãy gửi qua trò chuyện." },
];
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>
Giải thích
- Xác định thời gian và văn bản trong mảng captions.
- Cập nhật phụ đề theo thời gian thực dựa trên thời gian phát video.
b. Triển khai phụ đề đóng (Closed Caption)
Trong phụ đề đóng (Closed Caption), cung cấp tính năng bật và tắt hiển thị phụ đề.
Ví dụ: Bật/Tắt phụ đề
<button onclick="toggleCaptions()">Chuyển đổi phụ đề</button>
<script>
function toggleCaptions() {
const captionDiv = document.getElementById("caption");
captionDiv.style.display = captionDiv.style.display === "none" ? "block" : "none";
}
</script>
4. Công nghệ cung cấp phụ đề trực tiếp
a. SMIL（Synchronized Multimedia Integration Language）
Bằng cách sử dụng SMIL, bạn có thể cung cấp luồng văn bản đồng bộ để hiển thị phụ đề trực tiếp. Tuy nhiên, hiện nay việc sử dụng trực tiếp SMIL đã giảm do sự phổ biến của HTML5.
b. Nhận diện giọng nói thời gian thực sử dụng Web Speech API
Bằng cách sử dụng Web Speech API của JavaScript, bạn cũng có thể chuyển đổi âm thanh trực tiếp thành văn bản và hiển thị theo thời gian thực.
Ví dụ triển khai đơn giản
const recognition = new webkitSpeechRecognition();
recognition.lang = "ja-JP";
recognition.continuous = true;
recognition.onresult = (event) => {
const transcript = event.results[event.results.length - 1][0].transcript;
document.getElementById("caption").textContent = transcript;
};
recognition.start();
Chú ý
Web Speech API phụ thuộc vào khả năng hỗ trợ của trình duyệt, vì vậy nó không hoạt động trên tất cả các môi trường.
5. Lợi ích đối với khả năng tiếp cận
Việc cung cấp phụ đề trực tiếp giúp tạo ra nội dung thân thiện với nhiều người dùng hơn:
- Người khiếm thính: Có thể hiểu nội dung sự kiện trực tiếp hoặc hội thảo trực tuyến theo thời gian thực.
- Các tình huống cần hỗ trợ đa ngôn ngữ: Cung cấp phụ đề bằng nhiều ngôn ngữ để phục vụ khán giả quốc tế.
- Người xem ở nơi có nhiều tiếng ồn: Có thể thưởng thức nội dung ngay cả khi không nghe rõ âm thanh.
Tóm tắt
WCAG 2.2 “1.2.4 Phụ đề (trực tiếp)” là một hướng dẫn quan trọng nhằm làm cho nội dung có âm thanh trực tiếp trở nên dễ tiếp cận hơn.
- Bằng cách sử dụng HTML và JavaScript, bạn có thể dễ dàng cung cấp phụ đề trực tiếp.
- Hãy cân nhắc các ứng dụng sử dụng phụ đề đóng (Closed Caption) hoặc Web Speech API để nâng cao hơn nữa trải nghiệm người dùng.
Hãy bắt đầu bước đầu tiên để tạo ra nội dung web mà mọi người đều có thể truy cập, bằng cách thực hiện phát trực tiếp thân thiện với tất cả mọi người!
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.