Nguyên tắc WCAG 2.2 ‘1.2.5 Thuyết minh bằng âm thanh (Đoạn video đã ghi sẵn)’ ở mức AA

Mở đầu

WCAG 2.2 “1.2.5 Thuyết minh bằng âm thanh (Đoạn video đã ghi sẵn)” yêu cầu cung cấp thuyết minh bằng âm thanh (Audio Description) cho nội dung video đã ghi sẵn. Nguyên tắc này nhằm đáp ứng nhu cầu của những người khiếm thị hoặc những người gặp khó khăn trong việc hiểu thông tin phụ thuộc vào hình ảnh.

Trong thuyết minh bằng âm thanh, các thông tin thị giác quan trọng trong video (ví dụ như cử động của nhân vật, biểu cảm, văn bản, v.v.) sẽ được bổ sung và diễn giải bằng âm thanh.

Trong bài viết này, chúng tôi sẽ hướng dẫn 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. Mục đích và phạm vi áp dụng của thuyết minh bằng âm thanh

Thuyết minh bằng âm thanh（Audio Description） bổ sung các thông tin thị giác quan trọng trong video, giúp người dùng khiếm thị hiểu được nội dung trong các tình huống sau:

• Video không có âm thanh hoặc video có diễn biến câu chuyện mang tính trực quan.
• Video có chứa các manh mối thị giác quan trọng như biểu cảm khuôn mặt hoặc cử chỉ.

2. Cách cung cấp thuyết minh bằng âm thanh

a. Chuẩn bị một bản nhạc âm thanh khác (người dùng có thể lựa chọn).

Ví dụ triển khai bằng HTML

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track kind="descriptions" src="audio-description.vtt" srclang="ja" label="Thuyết minh bằng âm thanh">
  Trình duyệt này không thể phát video.
</video>

Giải thích

• Sử dụng phần tử <track> để chỉ định tệp phụ đề chứa thuyết minh bằng âm thanh (định dạng WebVTT).
• Bằng cách thiết lập kind=“descriptions”, trình phát video sẽ nhận diện đây là một track thuyết minh bằng âm thanh.

b. Cung cấp một phiên bản khác có chứa thuyết minh bằng âm thanh

Để mô tả nội dung hình ảnh, chuẩn bị một phiên bản khác của video gốc có chứa thuyết minh bằng âm thanh.

Ví dụ HTML

<p>Dưới đây là video có thuyết minh bằng âm thanh</p>
<video controls>
  <source src="example-audio-description.mp4" type="video/mp4">
  Trình duyệt này không hỗ trợ phát video.
</video>

Giải thích
Với phương pháp này, một tệp video khác được cung cấp để người dùng có thể chọn phiên bản có thuyết minh bằng âm thanh.

c. Thuyết minh bằng âm thanh mở rộng（Extended Audio Description）

Trong một số video, khi có nhiều nội dung cần thuyết minh, phương pháp** thuyết minh bằng âm thanh mở rộng** sẽ được sử dụng bằng cách tạm dừng phát video và chèn các mô tả chi tiết hơn.

3. Tạo tệp WebVTT dành cho thuyết minh bằng âm thanh

Khi cung cấp thuyết minh bằng âm thanh, nội dung mô tả thông tin hình ảnh sẽ được viết dưới dạng tệp WebVTT.

Ví dụ tệp WebVTT

WEBVTT

00:00:00.000 --> 00:00:05.000
Trên màn hình hiển thị "2024", bầu trời xanh rộng mở.

00:00:05.001 --> 00:00:10.000
Nhân vật chính bắt đầu bước đi với nụ cười trên môi, nền phía sau hiện lên một ngọn núi lớn.

4. Ứng dụng nâng cao sử dụng JavaScript

Triển khai cơ chế cho phép người dùng bật hoặc tắt thuyết minh bằng âm thanh theo nhu cầu bằng JavaScript.

Ví dụ về HTML và JavaScript

<video id="video" controls>
  <source src="example.mp4" type="video/mp4">
</video>
<button id="descriptionToggle">Chuyển đổi thuyết minh bằng âm thanh</button>

<script>
  document.getElementById("descriptionToggle").addEventListener("click", () => {
    const video = document.getElementById("video");
    const currentSource = video.src;
    video.src = currentSource.includes("description")
      ? "example.mp4"
      : "example-description.mp4";
    video.load();
  });
</script>

Giải thích
Triển khai một cơ chế đơn giản để bật/tắt thuyết minh bằng âm thanh bằng cách nhấn nút.

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ể giúp nhiều người dùng hơn tận hưởng nội dung của mình:

• Người khiếm thị: Có thể hiểu được các gợi ý hình ảnh trong video thông qua âm thanh.
• Khi cần truyền đạt nhiều thông tin trong thời gian ngắn: Có thể cung cấp thông tin hiệu quả hơn bằng cách tận dụng cả thị giác và thính giác.

Tóm tắt

WCAG 2.2 “1.2.5 Thuyết minh bằng âm thanh (Đoạn video đã ghi sẵn)” là một tiêu chí quan trọng nhằm giúp người dùng hiểu video mà không cần dựa vào thị giác.

• Bằng cách chuẩn bị một bản nhạc âm thanh khác hoặc một phiên bản video có thuyết minh, bạn có thể cung cấp nội dung thân thiện với tất cả mọi người.
• Ngay cả người mới bắt đầu cũng có thể dễ dàng triển khai thuyết minh bằng âm thanh bằng cách sử dụng HTML, CSS và JavaScript.

Hướng tới một trải nghiệm web dễ tiếp cận, hãy tích cực áp dụng việc cung cấp thuyết minh bằng âm thanh!

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.