WCAG 2.2 Hướng dẫn “1.2.3 Giải thích bằng âm thanh hoặc thay thế phương tiện (ghi sẵn)” Mức A
Mở đầu
WCAG 2.2 “1.2.3 Giải thích bằng âm thanh hoặc thay thế phương tiện (ghi sẵn)” yêu cầu cung cấp giải thích bằng âm thanh hoặc thay thế phương tiện cho nội dung phương tiện đồng bộ đã ghi sẵn (nội dung có âm thanh và hình ảnh được đồng bộ). Điều này nhằm giúp người khiếm thị có thể hiểu được nội dung của hình ảnh trong video.
Trong bài viết này, chúng tôi sẽ giải thích tiêu chuẩn này một cách dễ hiểu, kèm theo các ví dụ cụ thể, để những người mới bắt đầu học HTML, CSS và JavaScript cũng có thể nắm bắt.
1. Mục đích và phạm vi áp dụng của hướng dẫn
Mục đích chính của hướng dẫn này là đảm bảo rằng nội dung video có thể được sử dụng mà không cần dựa vào thị giác.
Cụ thể, nội dung video sẽ được bổ sung bằng các phương pháp sau đây:
-
Giải thích bằng âm thanh
Cung cấp một bản âm thanh giải thích các thông tin hình ảnh quan trọng trong video (ví dụ: văn bản, hành động, bối cảnh). -
Thay thế phương tiện
Cung cấp văn bản hoặc hình thức khác (ví dụ: bản âm thanh chỉ có giọng nói) mô tả chi tiết nội dung của video.
2. Cách triển khai giải thích bằng âm thanh
Giải thích bằng âm thanh bổ sung các thông tin quan trọng về mặt hình ảnh trong video qua âm thanh, và người dùng có thể lựa chọn khi phát video.
Triển khai bằng HTML
Ví dụ cơ bản
<video controls>
<source src="example.mp4" type="video/mp4">
<track src="audio-description.vtt" kind="descriptions" srclang="ja" label="Giải thích bằng âm thanh">
Trình duyệt này không thể phát video
</video>
Giải thích
- Bằng cách sử dụng thẻ <track> và chỉ định kind=“descriptions”, bạn có thể cung cấp giải thích bằng âm thanh.
- Thuộc tính src sẽ chỉ định tệp WebVTT chứa giải thích bằng âm thanh.
Ví dụ về tệp WebVTT
Dưới đây là một ví dụ về mô tả âm thanh được viết dưới dạng WebVTT:
Ví dụ về tệp WebVTT (audio-description.vtt)
WEBVTT
00:00:00.000 --> 00:00:05.000
Ở trung tâm màn hình, những ngọn núi tuyệt đẹp trải dài, và ở phía sau là khung cảnh hoàng hôn.
00:00:05.001 --> 00:00:10.000
Người leo núi cắm lá cờ trên đỉnh núi và nở nụ cười rạng rỡ.
Giải thích
- Giải thích nội dung hình ảnh phù hợp với thời gian được chỉ định bằng dấu thời gian.
- Điều này giúp những người gặp khó khăn khi xem video cũng có thể hiểu được nội dung.
3. Cách triển khai thay thế phương tiện
Nếu việc cung cấp giải thích bằng âm thanh gặp khó khăn, có thể cung cấp văn bản mô tả chi tiết nội dung video như một phương tiện thay thế.
Ví dụ trong HTML
Ví dụ đính kèm phương tiện thay thế cho video
<video controls>
<source src="example.mp4" type="video/mp4">
Trình duyệt này không thể phát video. Nội dung được mô tả bằng văn bản dưới đây.
</video>
<p>Nội dung video: Video này giới thiệu phong cảnh những ngọn núi tuyệt đẹp. Hình ảnh người leo núi đạt đến đỉnh, cắm lá cờ được hiển thị. Phía sau là ánh hoàng hôn rực rỡ.</p>
Giải thích
- Sử dụng thẻ <p> để mô tả nội dung video dưới dạng văn bản.
- Đây là phương pháp phù hợp khi không thể chuẩn bị giải thích bằng âm thanh.
4. Tùy chỉnh và ứng dụng
Chuyển đổi động bằng JavaScript
Bằng cách cho phép người dùng chuyển đổi giữa giải thích bằng âm thanh và mô tả văn bản khi cần, bạn có thể cung cấp các tính năng tiện lợi hơn.
Ví dụ: Kích hoạt giải thích bằng âm thanh
<video id="video" controls>
<source src="example.mp4" type="video/mp4">
<track id="desc" src="audio-description.vtt" kind="descriptions" srclang="ja" label="Giải thích bằng âm thanh">
</video>
<button onclick="toggleDescriptions()">Chuyển đổi giải thích bằng âm thanh</button>
<script>
function toggleDescriptions() {
const track = document.getElementById("desc");
track.mode = track.mode === "showing" ? "hidden" : "showing";
}
</script>
Giải thích
Người dùng có thể bật hoặc tắt giải thích bằng âm thanh bằng cách nhấn nút. Điều này cung cấp tùy chọn phù hợp với nhu cầu của họ.
5. Lợi ích của tính năng hỗ trợ tiếp cận
Bằng cách tuân thủ hướng dẫn này, bạn có thể cung cấp nội dung dễ sử dụng cho các nhóm người dùng sau:
- Người khiếm thị: Có thể hiểu nội dung video thông qua giải thích bằng âm thanh.
- Người tạm thời bị hạn chế thị giác（trong môi trường tối hoặc khi khó nhìn trên màn hình nhỏ).
- Người có thể bỏ lỡ chi tiết trong video: Có thể đọc phương tiện thay thế để hiểu chính xác ý nghĩa của video.
Ví dụ, bằng cách thêm giải thích bằng âm thanh vào video giới thiệu địa điểm du lịch, người khiếm thị cũng có thể cảm nhận được vẻ đẹp và sức hấp dẫn của địa điểm đó.
Tóm tắt
WCAG 2.2 “1.2.3 Giải thích bằng âm thanh hoặc thay thế phương tiện (ghi sẵn)” là một tiêu chuẩn quan trọng để làm cho nội dung video trở nên dễ tiếp cận hơn.
- Bằng cách cung cấp giải thích bằng âm thanh hoặc phương tiện thay thế bổ sung nội dung video, người dùng có thể hiểu video mà không cần dựa vào thị giác.
- Bằng cách sử dụng thẻ <track> trong HTML và tệp WebVTT, ngay cả người mới bắt đầu cũng có thể dễ dàng triển khai.
Hãy tận dụng cơ hội này để tạo nội dung web hỗ trợ tiếp cận, giúp nhiều người dùng hơn có thể thưởng thức!
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.