Hướng dẫn WCAG 2.2: Tiêu chí 1.2.8 Phương án thay thế cho nội dung truyền thông (đã ghi sẵn) – Cấp AAA
Mở đầu
Tiêu chí “1.2.8 Phương án thay thế cho nội dung truyền thông (đã ghi sẵn)” của WCAG 2.2 yêu cầu cung cấp văn bản thay thế hoàn chỉnh để mô tả nội dung của phương tiện phụ thuộc thời gian (video và âm thanh) đối với các phương tiện đồng bộ đã ghi sẵn hoặc phương tiện chỉ có hình ảnh đã ghi sẵn. Tiêu chí này nhằm hỗ trợ người dùng gặp hạn chế về thị giác hoặc thính giác, đồng thời hướng đến việc đạt được mức độ tiếp cận cao nhất (Cấp AAA).
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 dành cho người mới bắt đầu.
1. Sự cần thiết và đối tượng của phương án thay thế cho nội dung truyền thông
“Phương án thay thế cho nội dung truyền thông” là các thông tin thay thế dưới dạng văn bản hoặc hình thức khác nhằm giúp người dùng hiểu đầy đủ nội dung của các phương tiện phụ thuộc thời gian như video và âm thanh mà không cần dựa vào thị giác hoặc thính giác.
Các phương tiện truyền thông áp dụng
- Phương tiện đồng bộ (nội dung có âm thanh và hình ảnh đồng bộ với nhau)
Ví dụ: Video có thuyết minh - Phương tiện chỉ có hình ảnh (video không có âm thanh)
Ví dụ: Video chỉ có nội dung hình ảnh mà không có âm thanh
2. Cách cung cấp phương án thay thế cho nội dung truyền thông
a. Cung cấp thông tin thay thế cho phương tiện đồng bộ
Đối với phương tiện đồng bộ, cần chuẩn bị văn bản thay thế bao gồm toàn bộ thông tin được cung cấp qua hình ảnh và âm thanh. Văn bản thay thế này sẽ được cung cấp thông qua các liên kết hoặc hình thức tương tự.
Ví dụ về HTML
<video controls>
<source src="example.mp4" type="video/mp4">
Trình duyệt này không thể phát video
</video>
<p>
Nội dung đầy đủ của video này có thể được xem dưới dạng văn bản tại liên kết sau:
<a href="media-alternative.html">Đọc nội dung video dưới dạng văn bản</a>
</p>
Giải thích
- Cung cấp liên kết văn bản thay thế trong thẻ <p>
- Văn bản thay thế phải bao gồm toàn bộ thông tin có trong video hoặc âm thanh (như thuyết minh, các yếu tố hình ảnh quan trọng, hiệu ứng âm thanh, v.v.).
b. Cung cấp thông tin thay thế cho phương tiện chỉ có hình ảnh
Đối với phương tiện chỉ có hình ảnh, cần chuẩn bị văn bản mô tả đầy đủ thông tin hình ảnh.
Ví dụ về HTML
<video controls>
<source src="video-only.mp4" type="video/mp4">
Trình duyệt này không thể phát video
</video>
<p>
Nội dung của video này có thể được xem với phần mô tả chi tiết tại liên kết sau:
<a href="video-only-description.html">Đọc nội dung của video dưới dạng văn bản</a>
</p>
Giải thích
- Cung cấp nội dung được thể hiện trong video dưới dạng văn bản trên một trang khác hoặc trong cửa sổ pop-up.
c. Cách bao gồm thông tin thay thế trực tiếp trong HTML
Trong một số trường hợp, đặt văn bản thay thế ngay bên cạnh video để người dùng dễ dàng truy cập.
Ví dụ về HTML
<object data="example.mp4" type="video/mp4">
<p>Nội dung của video này như sau:<br>
Hình ảnh khu vườn mùa xuân được trình chiếu, với những cánh hoa anh đào bay trong gió.</p>
</object>
Giải thích
- Đây là cách cung cấp văn bản thay thế trong phần tử <object>.
- Ngay cả khi video không thể phát, nội dung vẫn có thể được truyền đạt qua văn bản.
3. Mở rộng thông tin thay thế bằng CSS và JavaScript
a. Cung cấp văn bản thay thế thông qua cửa sổ pop-up
Bằng cách sử dụng JavaScript, bạn có thể hiển thị thông tin thay thế dưới dạng cửa sổ pop-up.
Ví dụ về HTML và JavaScript
<video controls>
<source src="example.mp4" type="video/mp4">
Trình duyệt này không thể phát video
</video>
<button id="showDescription">Hiển thị thông tin thay thế</button>
<div id="description" style="display: none; background-color: #f0f0f0; padding: 10px;">
<p>Nội dung của video: Hình ảnh khu vườn được trình chiếu, với những cánh hoa bay trong gió.</p>
</div>
<script>
document.getElementById("showDescription").addEventListener("click", () => {
const description = document.getElementById("description");
description.style.display = description.style.display === "none" ? "block" : "none";
});
</script>
Giải thích
- Chức năng hiển thị thông tin thay thế được triển khai khi người dùng nhấn nút.
- Có thể cung cấp thông tin cho người dùng chỉ khi cần thiết.
4. Những điểm cần lưu ý khi tạo phương án thay thế cho nội dung truyền thông
- Ghi đầy đủ nội dung
Điều quan trọng là cung cấp đầy đủ tất cả thông tin có trong video hoặc âm thanh dưới dạng văn bản. Ví dụ, bao gồm nội dung thuyết minh, mô tả hình ảnh, và hiệu ứng âm thanh. - Văn bản liên kết dễ hiểu
Liên kết đến thông tin thay thế nên được viết rõ ràng, chẳng hạn như ‘Đọc nội dung của video dưới dạng văn bản’ thay vì ‘Nhấn vào đây’. - Đặt ở vị trí dễ truy cập
Thông tin thay thế nên được đặt ngay gần video để người dùng dễ dàng tìm thấy.
5. Lợi ích đối với khả năng 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 được nội dung của video thông qua văn bản chi tiết.
- Người khiếm thính: Có thể nắm bắt nội dung thuyết minh và âm thanh qua văn bản.
- Người ở trong môi trường không thể phát video hoặc âm thanh: Có thể xem nội dung thông qua thông tin thay thế.
Tóm tắt
Tiêu chí ‘1.2.8 Phương án thay thế cho nội dung truyền thông (đã ghi sẵn)’ trong WCAG 2.2 quy định việc cung cấp thông tin thay thế mô tả đầy đủ nội dung đối với các phương tiện đồng bộ đã ghi sẵn hoặc phương tiện chỉ có hình ảnh.
- Với sự hỗ trợ của HTML, CSS và JavaScript, việc cung cấp thông tin thay thế có thể được thực hiện một cách dễ dàng.
- Hãy cung cấp phương án thay thế cho nội dung truyền thông để tạo ra một môi trường mà mọi người dùng đều có thể tiếp cận nội dung một cách công bằng.
Ngay cả người mới bắt đầu cũng có thể thực hiện hướng dẫn này để tạo nên bước đầu tiên trong việc xây dựng một 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.