Hướng dẫn WCAG 2.2: 1.2.7 Mô tả âm thanh mở rộng (Video ghi sẵn) – Mức AAA
Mở đầu
WCAG 2.2 mục “1.2.7 Mô tả âm thanh mở rộng (Video ghi sẵn)” áp dụng cho các nội dung video được ghi sẵn, khi thông tin hình ảnh quá nhiều và mô tả âm thanh thông thường không đủ để giải thích. Mô tả âm thanh mở rộng (Extended Audio Description) sẽ tạm dừng phát video để bổ sung chi tiết về hình ảnh. Điều này giúp những người khiếm thị hiểu đầy đủ nội dung của video.
Trong bài viết này, chúng tôi sẽ giải thích chi tiết cách cung cấp mô tả âm thanh mở rộng bằng HTML, CSS và JavaScript dành cho người mới bắt đầu.
1. Mô tả âm thanh mở rộng là gì?
Trong mô tả âm thanh thông thường, phần giải thích được chèn vào các đoạn im lặng giữa âm thanh hoặc tiếng nền trong video. Tuy nhiên, trong các trường hợp sau đây, cần sử dụng mô tả âm thanh mở rộng:
- Phần im lặng quá ngắn để có thể chèn phần giải thích.
- Có quá nhiều thông tin cần truyền đạt bằng hình ảnh, khiến mô tả thông thường không đủ.
Trong mô tả âm thanh mở rộng, video sẽ được tạm dừng để giải thích thông tin cần thiết.
2. Cách cung cấp mô tả âm thanh mở rộng
a. Cung cấp một phiên bản khác có kèm mô tả âm thanh mở rộng
Tạo một phiên bản riêng có chứa mô tả âm thanh mở rộng và cho phép người dùng lựa chọn.
Ví dụ về HTML
<p>Dưới đây là video có kèm mô tả âm thanh mở rộng.</p>
<video controls>
<source src="example-extended-audio-description.mp4" type="video/mp4">
Trình duyệt này không thể phát video.
</video>
Giải thích
- Tạo tệp video mới bằng cách chèn mô tả âm thanh mở rộng vào video gốc.
- Thêm mô tả âm thanh bằng phần mềm chỉnh sửa và thiết lập chính xác thời điểm tạm dừng phát video.
b. Điều khiển mô tả âm thanh mở rộng bằng trình phát video
Triển khai phương pháp chèn mô tả âm thanh mở rộng trong quá trình phát video bằng HTML và JavaScript.
Ví dụ về HTML và JavaScript
<video id="mainVideo" controls>
<source src="example.mp4" type="video/mp4">
Trình duyệt này không thể phát video
</video>
<button id="playWithDescription">Phát mô tả âm thanh mở rộng</button>
<script>
const video = document.getElementById("mainVideo");
const descriptionTimings = [
{ time: 5, description: "Trên màn hình xuất hiện dòng chữ "Cảnh sắc mùa xuân"" },
{ time: 10, description: "Hình ảnh những cây anh đào nở rộ được chiếu lên" },
];
document.getElementById("playWithDescription").addEventListener("click", () => {
video.currentTime = 0;
video.play();
descriptionTimings.forEach(item => {
setTimeout(() => {
video.pause();
alert(item.description);
video.play();
}, item.time * 1000);
});
});
</script>
Giải thích
- Trong quá trình phát video, dừng lại tại thời điểm được chỉ định để chèn giải thích qua cửa sổ bật lên hoặc âm thanh.
- Quản lý nội dung giải thích bằng descriptionTimings để dễ dàng chỉnh sửa.
c. Cung cấp bản mô tả âm thanh mở rộng.
Có thể sử dụng phần tử <track> trong HTML để cung cấp mô tả âm thanh mở rộng dưới dạng một bản nhạc riêng biệt.
Ví dụ về HTML
<video controls>
<source src="example.mp4" type="video/mp4">
<track kind="descriptions" src="extended-description.vtt" srclang="ja" label="Mô tả âm thanh mở rộng">
Trình duyệt này không thể phát video
</video>
Ví dụ về tệp WebVTT (extended-description.vtt)
WEBVTT
00:00:05.000 --> 00:00:10.000
Trên màn hình xuất hiện dòng chữ "Phong cảnh mùa xuân"
00:00:10.001 --> 00:00:15.000
Những cây hoa anh đào nở rộ được chiếu lên màn hình
Giải thích
- Chỉ định mô tả âm thanh bằng kind=“descriptions”.
- Quản lý thời gian và nội dung bằng tệp WebVTT.
3. Thiết kế và bố trí mô tả âm thanh mở rộng
Khi cung cấp mô tả âm thanh mở rộng, cần lưu ý các điểm sau:
- Thiết lập thời gian một cách chính xác
Đảm bảo việc tạm dừng và phát video diễn ra một cách tự nhiên. - Đảm bảo tính khả dụng trong thao tác của người dùng
Cho phép người dùng linh hoạt bật/tắt phần giải thích và quản lý thời điểm phát giải thích.
4. Lợi ích đối với khả năng tiếp cận
Việc cung cấp mô tả âm thanh mở rộng có thể hỗ trợ các nhóm người dùng sau:
- Người khiếm thị: Có thể hiểu được thông tin phức tạp hoặc chuyển động trong video thông qua âm thanh.
- Người sử dụng trong nhiều tình huống khác nhau: Có thể nắm bắt nội dung video đầy đủ thông qua âm thanh.
Tóm tắt
WCAG 2.2 mục “1.2.7 Mô tả âm thanh mở rộng (Video ghi sẵn)” là tiêu chuẩn cấp cao nhất (Level AAA) nhằm đảm bảo người dùng có thể hiểu hoàn toàn nội dung video mà không cần dựa vào thị giác.
- Bằng cách cung cấp video có kèm mô tả âm thanh mở rộng hoặc một bản nhạc riêng, nhiều người dùng có thể thưởng thức nội dung một cách trọn vẹn.
- Bằng cách sử dụng HTML và JavaScript, cũng có thể cung cấp mô tả âm thanh mở rộng một cách động.
Hãy hướng tới việc tạo nội dung dễ tiếp cận và thử tích hợp triển khai mô tả âm thanh mở rộng!
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.