Hướng dẫn WCAG 2.2, mục 1.2.1: Chỉ âm thanh và chỉ hình ảnh (ghi trước) – Mức A
Lời mở đầu
Hướng dẫn WCAG 2.2, mục ‘1.2.1 Chỉ âm thanh và chỉ hình ảnh (Audio-only and Video-only)’ nêu rõ sự cần thiết phải cung cấp thông tin thay thế để các nội dung âm thanh hoặc hình ảnh được ghi trước trở nên dễ hiểu đối với người dùng. Tiêu chuẩn này nhằm đảm bảo rằng tất cả người dùng, bao gồm cả những người có khiếm khuyết về thị giác hoặc thính giác, đều có thể hiểu nội dung một cách bình đẳng.
Trong bài viết này, chúng tôi sẽ giải thích về hướng dẫn này một cách dễ hiểu, bao gồm cả ví dụ cụ thể và phương pháp triển khai, dành cho những người mới bắt đầu học HTML, CSS và JavaScript.
1. Trường hợp chỉ có âm thanh (ghi trước)
Đối với nội dung chỉ có âm thanh, cần cung cấp văn bản thay thế mô tả nội dung của âm thanh. Thông tin thay thế này phải truyền đạt chính xác những gì được chứa trong nội dung âm thanh.
Ví dụ về phương pháp triển khai
Ví dụ, trong trường hợp bài giảng âm thanh hoặc podcast:
Ví dụ HTML
<audio controls>
<source src="lecture.mp3" type="audio/mpeg">
Trình duyệt này không thể phát âm thanh. Vui lòng xem nội dung bài giảng qua văn bản dưới đây.
</audio>
<p>Nội dung bài giảng: Trong tệp âm thanh này, chúng tôi giải thích về các nguyên tắc cơ bản của khả năng tiếp cận web...</p>
Giải thích
<audio>Sử dụng thẻ để phát âm thanh đồng thời ghi lại thông tin chứa trong âm thanh bằng văn bản. Điều này giúp những người dùng gặp khó khăn khi nghe âm thanh cũng có thể nắm bắt được nội dung.
2. Trường hợp chỉ có hình ảnh (ghi trước)
Đối với nội dung chỉ có hình ảnh, cần cung cấp một trong các điều sau đây:
- Văn bản thay thế mô tả nội dung của hình ảnh
- Bản âm thanh mô tả nội dung của hình ảnh bằng lời
Ví dụ về phương pháp triển khai
Ví dụ, trong trường hợp video giới thiệu địa điểm du lịch phát mà không có âm thanh:
Ví dụ HTML (Sử dụng văn bản thay thế)
<video controls>
<source src="scenery.mp4" type="video/mp4">
Trình duyệt này không thể phát video. Vui lòng xem nội dung của video qua văn bản dưới đây.
</video>
<p>Nội dung video: Đây là đoạn phim quay lại cảnh dọc theo bờ biển tuyệt đẹp, hình ảnh mặt trời mọc và những chú chim bay lượn.</p>
Ví dụ HTML (Sử dụng bản âm thanh mô tả nội dung)
<video controls>
<source src="scenery.mp4" type="video/mp4">
<track kind="descriptions" src="audio-description.vtt" srclang="ja" label="Mô tả âm thanh">
</video>
Giải thích
Để giúp người dùng hiểu nội dung video mà không phụ thuộc vào thị giác, cần cung cấp văn bản mô tả chi tiết hoặc mô tả bằng âm thanh (bản âm thanh mô tả).
3. Các điểm kỹ thuật cụ thể
-
Thông tin thay thế phải ngắn gọn và chính xác
Việc tạo thông tin thay thế truyền tải chính xác nội dung của hình ảnh hoặc âm thanh là rất quan trọng. -
Kết hợp với CSS và JavaScript
Để nâng cao thiết kế và tính khả dụng, có thể tích hợp cơ chế hiển thị hoặc ẩn thông tin thay thế bằng cách sử dụng CSS và JavaScript.
Ví dụ sử dụng JavaScript (Hiển thị thông tin thay thế bằng nút)
<button onclick="toggleDescription()">Hiển thị thông tin thay thế</button>
<div id="description" style="display:none;">
<p>Nội dung video: Đây là đoạn phim quay cảnh hoàng hôn bên bờ biển. Sóng nhẹ nhàng chuyển động và có thể thấy những chú chim bay lượn.</p>
</div>
<script>
function toggleDescription() {
const description = document.getElementById("description");
description.style.display = description.style.display === "none" ? "block" : "none";
}
</script>
Giải thích
Bằng cách sử dụng JavaScript để hiển thị thông tin thay thế khi nhấn nút, bạn có thể cải thiện trải nghiệm người dùng.
4. Lợi ích khi tuân thủ các hướng dẫn
Bằng cách tuân thủ tiêu chuẩn này, các nhóm người dùng sau đây sẽ có thể tận hưởng nội dung:
- Người khiếm thính（ngay cả khi không thể nghe nội dung âm thanh, họ vẫn có thể hiểu thông qua văn bản thay thế）
- Người khiếm thị（ngay cả khi không thể xem nội dung video, họ vẫn có thể hiểu qua mô tả âm thanh）
- Những người bị hạn chế bởi môi trường（trong tình huống không thể nghe âm thanh hoặc không thể xem video, họ vẫn có thể được hỗ trợ thông qua thông tin thay thế）
Ví dụ, nếu các video đào tạo của công ty có mô tả hình ảnh và văn bản thay thế cho âm thanh, sẽ tạo điều kiện để tất cả nhân viên có một môi trường học tập bình đẳng.
Tóm tắt
WCAG 2.2, mục ‘1.2.1 Chỉ âm thanh và chỉ hình ảnh (ghi trước)’ là quy tắc cơ bản để làm cho nội dung đa phương tiện trở nên dễ tiếp cận.
Đối với nội dung âm thanh, hãy chuẩn bị văn bản thay thế mô tả nội dung; đối với nội dung video, hãy đảm bảo có văn bản thay thế hoặc mô tả âm thanh. Điều này sẽ mang lại trải nghiệm web thân thiện cho tất cả người dùng.
Ngay cả những người mới bắt đầu làm web cũng hãy áp dụng quy tắc này để hướng đến việc tạo ra các trang web dễ tiếp cậ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.