Nguyên tắc WCAG 2.2 ‘1.2.9 Chỉ có âm thanh (Trực tiếp)’ Cấp độ AAA
Mở đầu
WCAG 2.2 “1.2.9 Chỉ có âm thanh (Trực tiếp)” yêu cầu cung cấp văn bản thay thế để truyền tải nội dung của âm thanh trực tiếp một cách bình đẳng. Nguyên tắc này nhằm mục đích giúp những người bị khiếm thính hoặc những người không thể nghe âm thanh trong các tình huống nhất định có thể tiếp cận được nội dung của âm thanh trực tiếp.
Trong bài viết này, chúng tôi sẽ giải thích chi tiết cách triển khai cụ thể bằng HTML, CSS và JavaScript để ngay cả người mới bắt đầu cũng có thể dễ dàng hiểu được.
1. Sự cần thiết của văn bản thay thế cho nội dung âm thanh trực tiếp
Nội dung âm thanh trực tiếp là thông tin âm thanh được phát trực tuyến theo thời gian thực. Các ví dụ bao gồm:
- Phát sóng radio
- Podcast trực tiếp
- Âm thanh bài phát biểu trong cuộc họp trực tuyến
Việc cung cấp văn bản thay thế sẽ giúp những người dùng sau đây dễ dàng sử dụng nội dung hơn:
- Người khiếm thính: Có thể tiếp cận thông tin bằng cách đọc nội dung âm thanh.
- Người ở trong môi trường không thể nghe âm thanh: Có thể sử dụng nội dung ngay cả ở nơi ồn ào hoặc trong tình huống bị hạn chế phát âm thanh.
2. Cách cung cấp văn bản thay thế
a. Cung cấp kịch bản được chuẩn bị trước
Trong trường hợp bài phát biểu hoặc bài giảng đã có sẵn bản thảo (kịch bản) từ trước, bản thảo đó sẽ được cung cấp dưới dạng văn bản.
Ví dụ về HTML
<audio controls>
<source src="live-audio.mp3" type="audio/mpeg">
Trình duyệt này không thể phát âm thanh
</audio>
<p>
Bạn có thể xem nội dung của buổi phát sóng trực tiếp này dưới dạng văn bản thông qua liên kết sau:<br>
<a href="prepared-script.html">Đọc nội dung phát sóng (kịch bản)</a>
</p>
Giải thích
- Nếu có kịch bản, hãy cung cấp nó qua một trang riêng hoặc một liên kết.
- Đặt văn bản thay thế gần nội dung âm thanh sẽ giúp người dùng dễ dàng tìm thấy hơn.
b. Cung cấp phụ đề âm thanh trực tiếp theo thời gian thực
Đây là phương pháp chuyển âm thanh trực tiếp thành văn bản một cách tự động hoặc thủ công và hiển thị trên màn hình.
Ví dụ về HTML và JavaScript
<div id="liveAudioContainer">
<audio controls>
<source src="live-audio-stream.mp3" type="audio/mpeg">
Trình duyệt này không thể phát âm thanh
</audio>
<div id="liveCaptions" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;">
Phụ đề trực tiếp sẽ được hiển thị ở đây...
</div>
</div>
<script>
// Ví dụ đơn giản về cập nhật phụ đề
const captions = [
{ time: 0, text: "Xin chào, buổi phát sóng trực tiếp đã bắt đầu" },
{ time: 10, text: "Hôm nay, chúng tôi sẽ nói về khả năng truy cập web" },
{ time: 20, text: "Nếu bạn có bất kỳ câu hỏi nào, vui lòng gửi qua chat" },
];
setInterval(() => {
const currentTime = Math.floor((new Date().getTime() / 1000) % 30); // Bộ hẹn giờ giả lập
const currentCaption = captions.find(caption => caption.time === currentTime);
if (currentCaption) {
document.getElementById("liveCaptions").textContent = currentCaption.text;
}
}, 1000);
</script>
Giải thích
- Định nghĩa thời gian và văn bản trong mảng captions, sau đó cập nhật theo thời gian thực.
- Trong ví dụ này, dữ liệu cố định được sử dụng, nhưng việc tự động tạo cũng có thể thực hiện được bằng cách sử dụng API nhận diện giọng nói.
c. Sử dụng dịch vụ phụ đề trực tiếp chuyên nghiệp.
Trong trường hợp sự kiện quy mô lớn hoặc buổi phát sóng trực tiếp quan trọng, việc sử dụng dịch vụ phụ đề trực tiếp chuyên nghiệp có thể cung cấp văn bản thay thế với độ chính xác cao.
3. Những điểm cần lưu ý khi triển khai
- Đảm bảo thời gian chính xác
Việc đồng bộ hóa tiến trình âm thanh với thời gian hiển thị phụ đề sẽ giúp người dùng dễ dàng hiểu nội dung hơn. - Cân nhắc đến tính dễ đọc
Điều chỉnh kích thước chữ và độ tương phản màu của phụ đề để đảm bảo thiết kế dễ đọc.
Ví dụ về CSS
#liveCaptions {
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
padding: 10px;
border-radius: 5px;
max-width: 600px;
margin: auto;
}
4. Lợi ích của khả năng truy cập (Accessibility)
Tuân thủ tiêu chuẩn “1.2.9 Chỉ có âm thanh (Trực tiếp)” giúp hỗ trợ các nhóm người dùng sau:
- Người khiếm thính: Có thể nắm bắt nội dung âm thanh theo thời gian thực.
- Người dùng đa ngôn ngữ: Có thể dịch phụ đề để hỗ trợ khán giả đa quốc gia.
- Người dùng trong môi trường ồn ào hoặc yên tĩnh: Có thể tiếp cận nội dung ngay cả khi không thể nghe âm thanh.
5. Các bước triển khai
- Chuẩn bị kịch bản (script) của nội dung âm thanh
Nếu có thể, hãy chuẩn bị trước kịch bản của âm thanh trực tiếp và cung cấp nó dưới dạng một liên kết. - Xây dựng hệ thống phụ đề trực tiếp theo thời gian thực
Trong trường hợp quy mô nhỏ, có thể thực hiện thủ công; còn đối với quy mô lớn, nên sử dụng API nhận diện giọng nói hoặc các dịch vụ chuyên nghiệp. - Áp dụng thiết kế có tính đến khả năng truy cập (accessibility)
Thực hiện phong cách thiết kế tập trung vào tính dễ đọc của phụ đề.
Tóm tắt
WCAG 2.2 “1.2.9 Chỉ có âm thanh (Trực tiếp)” là một hướng dẫn quan trọng nhằm giúp những người khiếm thính hoặc ở trong môi trường không thể nghe âm thanh có thể tiếp cận nội dung âm thanh trực tiếp.
- Việc cung cấp kịch bản văn bản hoặc phụ đề trực tiếp theo thời gian thực giúp tạo ra nội dung web thân thiện hơn với nhiều đối tượng người dùng.
- Bằng cách sử dụng HTML, CSS và JavaScript, bạn có thể dễ dàng bắt đầu triển khai.
Hãy bắt tay vào thực hiện để hướng tới nội dung trực tiếp có tính truy cập cao hơn!
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.