Về Hướng dẫn WCAG 2.2 – Mục 1.4.2 Kiểm soát âm thanh (Audio Control) – Mức A
Mở đầu
Mục 1.4.2 “Kiểm soát âm thanh” trong WCAG 2.2 yêu cầu rằng nếu có âm thanh tự động phát trên trang web kéo dài hơn 3 giây, thì cần cung cấp một trong các phương thức điều khiển sau đây:
- Cơ chế tạm dừng hoặc dừng âm thanh
- Chức năng điều chỉnh âm lượng độc lập với âm lượng của toàn bộ hệ thống
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ể để đáp ứng tiêu chuẩn này bằng HTML, CSS và JavaScript dành cho người mới bắt đầu.
1. Lý do cần có kiểm soát âm thanh
Âm thanh tự động phát sinh có thể gây ra các vấn đề sau đây:
- Người khiếm thị: Khi sử dụng trình đọc màn hình, âm thanh tự động có thể chồng lấn với giọng đọc, khiến việc tiếp nhận thông tin trở nên khó khăn.
- Người có khuyết tật nhận thức: Âm thanh bất ngờ có thể gây nhầm lẫn hoặc làm họ bối rối.
- Hạn chế về môi trường: Gây ra vấn đề trong những môi trường không thể phát âm thanh (như thư viện, v.v.).
Việc cung cấp chức năng kiểm soát âm thanh giúp tất cả người dùng có thể sử dụng nội dung một cách thoải mái hơn.
2. Phương pháp triển khai
a. Giới hạn việc tự động phát âm thanh trong vòng 3 giây
Nếu âm thanh được phát tự động, hãy cài đặt để nó kết thúc trong vòng 3 giây.
Ví dụ HTML
<audio autoplay>
<source src="short-audio.mp3" type="audio/mpeg">
Trình duyệt này không hỗ trợ âm thanh.
</audio>
- Các hiệu ứng âm thanh ngắn có thể tránh được vấn đề bằng cách sử dụng phương pháp này.
b. Cung cấp nút phát/tạm dừng
Đặt nút phát/tạm dừng để người dùng có thể điều khiển âm thanh.
Ví dụ HTML và JavaScript
<audio id="backgroundAudio" autoplay loop>
<source src="background-audio.mp3" type="audio/mpeg">
Trình duyệt này không hỗ trợ âm thanh.
</audio>
<button id="audioControl">Tạm dừng</button>
<script>
const audio = document.getElementById("backgroundAudio");
const controlButton = document.getElementById("audioControl");
controlButton.addEventListener("click", () => {
if (audio.paused) {
audio.play();
controlButton.textContent = "Tạm dừng";
} else {
audio.pause();
controlButton.textContent = "Phát";
}
});
</script>
Điểm lưu ý
- Sử dụng thuộc tính audio.paused để xác định trạng thái phát hiện tại.
- Bằng cách thay đổi nhãn của nút tùy theo trạng thái, giúp người dùng thao tác dễ hiểu hơn.
c. Cung cấp chức năng điều chỉnh âm lượng
Bằng cách triển khai chức năng điều chỉnh âm lượng, người dùng có thể điều chỉnh âm thanh độc lập với âm lượng của hệ thống.
Ví dụ HTML và JavaScript
<audio id="backgroundAudio" autoplay loop>
<source src="background-audio.mp3" type="audio/mpeg">
Trình duyệt này không hỗ trợ âm thanh.
</audio>
<label for="volumeControl">Âm lượng：</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
<script>
const audio = document.getElementById("backgroundAudio");
const volumeControl = document.getElementById("volumeControl");
volumeControl.addEventListener("input", () => {
audio.volume = volumeControl.value;
});
</script>
Điểm lưu ý
- Sử dụng <input type=“range”> để người dùng có thể điều chỉnh âm lượng một cách mượt mà.
- Thuộc tính audio.volume được chỉ định trong khoảng từ 0 (tắt tiếng) đến 1 (âm lượng tối đa).
3. Những lỗi thường gặp và cách khắc phục
a. Không có cách nào để dừng âm thanh
Ví dụ sai
<audio autoplay>
<source src="long-audio.mp3" type="audio/mpeg">
</audio>
- Âm thanh tự động phát nhưng không có phương thức nào để dừng lại.
Biện pháp cải thiện Đặt nút phát/tạm dừng (tham khảo ví dụ đã nêu ở trên).
b. Chỉ hiển thị thông báo “Vui lòng điều chỉnh âm lượng”
Ví dụ sai
<p>Nếu âm thanh quá to, hãy điều chỉnh âm lượng của hệ thống.</p>
- Chỉ yêu cầu người dùng điều chỉnh âm lượng của toàn bộ hệ thống thì không đáp ứng được tiêu chuẩn.
Biện pháp cải thiện Cung cấp chức năng điều chỉnh âm lượng riêng cho âm thanh (tham khảo ví dụ đã nêu ở trên).
4. Lợi ích về khả năng truy cập (Accessibility)
a. Tăng sự lựa chọn cho người dùng
- Việc có thể dừng âm thanh tự động bằng tay giúp người dùng thao tác linh hoạt hơn tùy theo môi trường và hoàn cảnh cá nhân.
b. Giảm bớt căng thẳng do âm thanh phát ra bất ngờ
- Ngăn chặn việc phát âm thanh ngoài ý muốn của người dùng và mang lại trải nghiệm duyệt web thoải mái.
Tóm tắt
Mục 1.4.2 “Kiểm soát âm thanh” trong WCAG 2.2 yêu cầu cung cấp phương thức điều khiển đối với âm thanh tự động phát kéo dài hơn 3 giây.
Điểm chính khi triển khai
- Giới hạn tự động phát trong vòng 3 giây
Đối với âm thanh ngắn, không cần thiết phải cung cấp chức năng điều khiển. - Cài đặt nút phát/tạm dừng
Cho phép người dùng tự điều khiển âm thanh bằng tay. - Thêm chức năng điều chỉnh âm lượng
Cung cấp phương thức điều chỉnh âm lượng độc lập với âm lượng hệ thống.
Bằng cách thực hiện những điều này, nội dung âm thanh sẽ trở nên dễ tiếp cận đối với tất cả người dù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.