Hướng dẫn WCAG 2.2: 1.2.6 Ngôn ngữ ký hiệu (Video ghi sẵn) – Mức AAA
Mở đầu
WCAG 2.2 mục “1.2.6 Ngôn ngữ ký hiệu (Video ghi sẵn)” yêu cầu cung cấp dịch vụ phiên dịch ngôn ngữ ký hiệu cho phương tiện đồng bộ được ghi sẵn (nội dung có âm thanh và hình ảnh đồng bộ hóa). Tiêu chuẩn này là tiêu chuẩn tiếp cận cấp độ cao nhất (Level AAA) nhằm hỗ trợ những người khiếm thính dễ dàng hiểu thông tin hơn.
Trong bài viết này, chúng tôi sẽ giải thích chi tiết về cách cung cấp dịch vụ phiên dịch ngôn ngữ ký hiệu, kèm theo các ví dụ cụ thể và phương pháp triển khai, nhằm giúp những người mới bắt đầu học HTML, CSS và JavaScript dễ dàng hiểu được.
1. Mục đích cung cấp dịch vụ phiên dịch ngôn ngữ ký hiệu
Đối với nhiều người khiếm thính, việc hiểu ngôn ngữ ký hiệu dễ dàng hơn so với đọc văn bản viết hoặc phụ đề. Việc tích hợp phiên dịch ngôn ngữ ký hiệu vào video mang lại những lợi ích sau:
- Quan tâm đến người dùng sử dụng ngôn ngữ ký hiệu như phương tiện giao tiếp chính.
- Cải thiện sự hiểu biết thông tin bằng cách cung cấp đồng thời thông tin trực quan và ngôn ngữ ký hiệu.
2. Cách cung cấp dịch vụ phiên dịch ngôn ngữ ký hiệu
a. Nhúng người phiên dịch ngôn ngữ ký hiệu vào video
Ghi hình người phiên dịch ngôn ngữ ký hiệu như một phần của video và nhúng vào video gốc là cách đơn giản và phổ biến nhất. Với phương pháp này, toàn bộ video sẽ bao gồm phiên dịch ngôn ngữ ký hiệu, do đó người dùng không cần thực hiện bất kỳ thao tác đặc biệt nào. Ví dụ về HTML
<video controls>
<source src="example-with-sign-language.mp4" type="video/mp4">
Trình duyệt này không thể phát video
</video>
Giải thích
- Sử dụng video được sản xuất ở định dạng mà người phiên dịch ngôn ngữ ký hiệu xuất hiện trong hình ảnh.
- Kết hợp người phiên dịch ngôn ngữ ký hiệu vào video gốc bằng phần mềm chỉnh sửa.
b. Cung cấp phiên dịch ngôn ngữ ký hiệu trong một chế độ xem riêng.
Đây là phương pháp hiển thị video của người phiên dịch ngôn ngữ ký hiệu trong một cửa sổ hoặc lớp phủ riêng biệt. Người dùng có thể linh hoạt bật hoặc tắt hiển thị phiên dịch ngôn ngữ ký hiệu theo nhu cầu.
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>
<video id="signLanguageVideo" controls style="display: none; width: 200px; position: absolute; bottom: 10px; right: 10px;">
<source src="sign-language.mp4" type="video/mp4">
</video>
<button id="toggleSignLanguage">Hiển thị phiên dịch ngôn ngữ ký hiệu</button>
<script>
document.getElementById("toggleSignLanguage").addEventListener("click", () => {
const signVideo = document.getElementById("signLanguageVideo");
signVideo.style.display = signVideo.style.display === "none" ? "block" : "none";
});
</script>
Giải thích
- Cung cấp phiên dịch ngôn ngữ ký hiệu dưới dạng một video riêng biệt, cho phép người dùng chuyển đổi hiển thị theo nhu cầu.
- Ẩn bằng style=“display: none;” và quản lý trạng thái hiển thị bằng JavaScript.
c. Đồng bộ phiên dịch ngôn ngữ ký hiệu bằng SMIL（Synchronized Multimedia Integration Language）
Cũng có thể sử dụng SMIL để đồng bộ và hiển thị video gốc cùng video phiên dịch ngôn ngữ ký hiệu. Tuy nhiên, SMIL không còn phổ biến trong môi trường web hiện đại, và việc sử dụng HTML5 hoặc JavaScript được khuyến nghị hơn.
3. Thiết kế và bố trí phiên dịch ngôn ngữ ký hiệu
Để hiển thị người phiên dịch ngôn ngữ ký hiệu một cách hiệu quả, hãy chú ý các điểm sau:
- Hiển thị video của người phiên dịch ngôn ngữ ký hiệu với kích thước đủ lớn
- Cài đặt kích thước sao cho tay và biểu cảm của người phiên dịch dễ dàng nhìn thấy.
- Cho phép người dùng điều chỉnh vị trí hiển thị
- Khi cung cấp dưới dạng lớp phủ, việc thêm chức năng cho phép người dùng điều chỉnh vị trí và kích thước sẽ rất tiện lợi.
Ví dụ về kiểu dáng bằng CSS
#signLanguageVideo {
width: 200px;
position: absolute;
bottom: 10px;
right: 10px;
border: 2px solid black;
background-color: white;
}
4. Hỗ trợ đa ngôn ngữ và khả năng mở rộng
Ngôn ngữ ký hiệu cũng có sự khác biệt giữa các quốc gia (ví dụ: Ngôn ngữ Ký hiệu Nhật Bản, Ngôn ngữ Ký hiệu Mỹ). Khi cung cấp nhiều phiên dịch ngôn ngữ ký hiệu trong video, cần phải cho phép người dùng lựa chọn ngôn ngữ phù hợp.
Ví dụ về HTML và JavaScript
<video id="mainVideo" controls>
<source src="example.mp4" type="video/mp4">
</video>
<select id="languageSelector">
<option value="none">Không có ngôn ngữ ký hiệu</option>
<option value="japanese">Ngôn ngữ ký hiệu Nhật Bản</option>
<option value="asl">Ngôn ngữ ký hiệu Mỹ</option>
</select>
<div id="signLanguageContainer"></div>
<script>
const signLanguages = {
japanese: "japanese-sign-language.mp4",
asl: "asl-sign-language.mp4"
};
document.getElementById("languageSelector").addEventListener("change", (event) => {
const container = document.getElementById("signLanguageContainer");
container.innerHTML = ""; // Xóa video ngôn ngữ ký hiệu hiện có
if (event.target.value !== "none") {
const video = document.createElement("video");
video.src = signLanguages[event.target.value];
video.controls = true;
video.style.width = "200px";
container.appendChild(video);
}
});
</script>
Giải thích
- Cung cấp menu thả xuống để chọn ngôn ngữ ký hiệu bằng thẻ select.
- Hiển thị video theo ngôn ngữ mà người dùng đã chọn.
5. Lợi ích của khả năng tiếp cận
Việc cung cấp phiên dịch ngôn ngữ ký hiệu có thể hỗ trợ các nhóm người dùng sau:
- Người khiếm thính: Những người sử dụng ngôn ngữ ký hiệu làm phương tiện giao tiếp chính sẽ dễ dàng hiểu nội dung của video hơn.
- Người dùng đa quốc gia: Việc cung cấp ngôn ngữ ký hiệu đa ngôn ngữ sẽ nâng cao khả năng tiếp cận trên toàn cầu.
Ví dụ, việc thêm phiên dịch ngôn ngữ ký hiệu vào nội dung video giáo dục có thể tạo ra môi trường học tập bình đẳng, giúp học sinh khiếm thính cũng có cơ hội tiếp cận kiến thức.
Tóm tắt
WCAG 2.2 mục “1.2.6 Ngôn ngữ ký hiệu (Video ghi sẵn)” là tiêu chuẩn cấp cao nhất (Level AAA) nhằm đảm bảo nội dung trở nên dễ tiếp cận về mặt thị giác và thính giác thông qua phiên dịch ngôn ngữ ký hiệu.
- Có thể triển khai bằng cách nhúng phiên dịch ngôn ngữ ký hiệu vào video hoặc hiển thị trong một cửa sổ riêng biệt.
- Ngay cả người mới bắt đầu cũng có thể dễ dàng tích hợp việc cung cấp phiên dịch ngôn ngữ ký hiệu linh hoạt bằng cách sử dụng HTML và JavaScript.
Hãy tham khảo điều này và cùng hướng tới việc tạo ra nội dung web thân thiện với mọi người!
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.