Nguyên tắc WCAG 2.2 ‘1.2.2 Phụ đề (Video đã ghi sẵn)’ Mức A
Mở đầu
Nguyên tắc WCAG 2.2 “1.2.2 Phụ đề (Video đã ghi sẵn)” yêu cầu cung cấp phụ đề cho tất cả nội dung âm thanh đã ghi sẵn trong các phương tiện đồng bộ (nội dung có âm thanh và hình ảnh đồng bộ với nhau). Điều này nhằm đảm bảo rằng những người khiếm thính hoặc ở trong môi trường khó nghe âm thanh cũng có thể truy cập và sử dụng nội dung.
Bài viết này sẽ giải thích chi tiết về tầm quan trọng của phụ đề và cách thực hiện cụ thể dành cho những người mới bắt đầu học HTML, CSS và JavaScript.
1. Quy tắc cơ bản của ‘1.2.2 Phụ đề’
Trong tiêu chuẩn này, các phương tiện đồng bộ có âm thanh đã được ghi sẵn bắt buộc phải cung cấp phụ đề đáp ứng các yêu cầu sau:
- Cung cấp văn bản phản ánh chính xác nội dung âm thanh.
- Hiển thị đồng bộ với âm thanh.
Phụ đề cần bao gồm không chỉ hội thoại mà còn cả các âm thanh quan trọng và hiệu ứng âm thanh (ví dụ: tiếng vỗ tay hoặc tiếng cửa).
2. Cách thực hiện phụ đề
Khi triển khai phụ đề trong HTML, thẻ <track> được sử dụng. Thẻ này được dùng để thêm tệp phụ đề vào video.
Triển khai cơ bản
Ví dụ HTML
<video controls>
<source src="example.mp4" type="video/mp4">
<track src="example.vtt" kind="subtitles" srclang="ja" label="Tiếng Nhật">
Trình duyệt này không thể phát video.
</video>
Giải thích
- Chỉ định tệp phụ đề bằng thẻ <track>.
- kind=“subtitles” nghĩa là phụ đề, và srclang dùng để chỉ định ngôn ngữ của phụ đề (trong trường hợp tiếng Nhật là ja).
- Thuộc tính src chỉ định đường dẫn đến tệp VTT chứa nội dung phụ đề (ví dụ: example.vtt).
Tạo tệp VTT
Tệp VTT được tạo theo định dạng WebVTT (Web Video Text Tracks). Dưới đây là một ví dụ:
Ví dụ tệp VTT (example.vtt)
WEBVTT
00:00:00.000 --> 00:00:05.000
Xin chào, đây là video giải thích về khả năng truy cập web
00:00:05.001 --> 00:00:10.000
Phụ đề hữu ích cho tất cả mọi người, bao gồm cả những người khiếm thính
Giải thích
- Mỗi phần sẽ chỉ định dấu thời gian theo định dạng “thời gian bắt đầu –> thời gian kết thúc”.
- Văn bản ghi lại nội dung được nói và các âm thanh quan trọng.
Tùy chỉnh (Điều chỉnh thiết kế bằng CSS)
Khi thêm phụ đề vào video trong HTML, một số trình duyệt có thể áp dụng kiểu mặc định. Bạn cũng có thể tùy chỉnh giao diện của phụ đề bằng cách sử dụng CSS.
Ví dụ về CSS
video::-webkit-media-text-track-display {
background-color: rgba(0, 0, 0, 0.7); /* Làm nền màu đen bán trong suốt.*/
color: white; /* Đặt màu chữ của phụ đề thành màu trắng. */
font-size: 16px; /* Kích thước chữ của phụ đề.*/
text-shadow: 1px 1px 2px black; /* Thêm bóng cho phụ đề để dễ đọc hơn. */
}
Chuyển đổi phụ đề bằng JavaScript
Bằng cách sử dụng JavaScript, bạn có thể triển khai chức năng chuyển đổi động giữa nhiều ngôn ngữ phụ đề.
Ví dụ HTML & JavaScript
<video id="video" controls>
<source src="example.mp4" type="video/mp4">
<track id="track" src="example-ja.vtt" kind="subtitles" srclang="ja" label="Tiếng Nhật">
<track src="example-en.vtt" kind="subtitles" srclang="en" label="English">
</video>
<select id="languageSelector" onchange="changeSubtitle()">
<option value="ja">Tiếng Nhật</option>
<option value="en">English</option>
</select>
<script>
function changeSubtitle() {
const video = document.getElementById("video");
const track = document.getElementById("track");
const selectedLang = document.getElementById("languageSelector").value;
track.src = selectedLang === "ja" ? "example-ja.vtt" : "example-en.vtt";
video.load();
}
</script>
Giải thích
Khi người dùng chọn ngôn ngữ, phụ đề sẽ được chuyển đổi. Điều này cho phép cung cấp video hỗ trợ đa ngôn ngữ và dễ tiếp cận.
3. Lợi ích của việc cung cấp phụ đề:
Bằng cách tuân thủ “1.2.2 Phụ đề”, bạn có thể đáp ứng nhu cầu của các đối tượng người dùng sau:
- Những người khiếm thính: Dù không thể nghe được âm thanh, họ vẫn có thể tiếp nhận thông tin qua phụ đề.
- Những người ở trong môi trường không thể nghe âm thanh: Có thể sử dụng trong môi trường ồn ào hoặc nơi cần yên tĩnh, không thể phát âm thanh.
- Người học ngôn ngữ: Phụ đề giúp bổ sung những phần không nghe rõ thông qua văn bản.
Ví dụ, bằng cách cung cấp phụ đề cho các khóa học trực tuyến tại các cơ sở giáo dục, bạn có thể tạo ra một môi trường học tập bình đẳng cho những người học đến từ nhiều hoàn cảnh khác nhau.
Tóm tắt
Nguyên tắc “1.2.2 Phụ đề (Video đã ghi sẵn)” trong WCAG 2.2 là tiêu chuẩn cơ bản để làm cho phương tiện đồng bộ trở nên dễ tiếp cận hơn. Bằng cách thêm phụ đề vào video, bạn có thể giúp nhiều người dùng hơn thưởng thức và sử dụng nội dung một cách thuận tiện.
Bằng cách sử dụng thẻ <track> trong HTML và tệp phụ đề định dạng VTT, bạn có thể dễ dàng triển khai phụ đề. Những người mới bắt đầu làm web cũng nên chú ý đến việc cung cấp phụ đề để tạo ra các trang web dễ tiếp cận hơ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.