Về hướng dẫn WCAG 2.2 ‘2.5.4 Điều khiển chuyển động’ Mức A
Mở đầu
Tiêu chuẩn ‘2.5.4 Điều khiển chuyển động’ trong WCAG 2.2 yêu cầu rằng các chức năng được thực hiện thông qua chuyển động của thiết bị hoặc người dùng (ví dụ: thao tác lắc hoặc nghiêng thiết bị) phải có thể điều khiển được bằng các thành phần giao diện người dùng (ví dụ: nút bấm), và cung cấp cài đặt để vô hiệu hóa các thao tác điều khiển bằng chuyển động. Tiêu chuẩn này nhằm ngăn ngừa thao tác sai và đảm bảo rằng người dùng gặp khó khăn với thao tác chuyển động cũng có thể sử dụng được.
1. Khái quát tiêu chí
Yêu cầu
- Các chức năng thực hiện qua chuyển động của thiết bị (ví dụ: lắc, nghiêng thiết bị, xoay) cần phải có thể thực hiện được bằng các phương án thay thế (như các yếu tố giao diện người dùng truyền thống như nút bấm hoặc thanh trượt).
- Cung cấp cài đặt để vô hiệu hóa hoặc tắt tính năng điều khiển bằng chuyển động.
- Sẽ có ngoại lệ trong trường hợp điều khiển bằng chuyển động là không thể thiếu (ví dụ: máy đếm bước).
2. Phương pháp triển khai
a. Cung cấp các thành phần giao diện người dùng truyền thống
Ngoài việc điều khiển bằng chuyển động, cung cấp cùng một chức năng qua các giao diện như nút bấm hoặc thanh trượt.
Ví dụ: Cung cấp nút bấm thay vì lắc thiết bị để reset
HTML
<button id="resetButton">Reset</button>
JavaScript
document.getElementById('resetButton').addEventListener('click', () => {
console.log('Khôi phục đã được thực hiện');
});
b. Cung cấp cài đặt để vô hiệu hóa điều khiển bằng chuyển động
Cung cấp tùy chọn để người dùng có thể vô hiệu hóa điều khiển bằng chuyển động
Ví dụ: Cài đặt chuyển đổi bật/tắt điều khiển bằng chuyển động
HTML
<label>
<input type="checkbox" id="motionToggle"> Kích hoạt điều khiển bằng chuyển động
</label>
JavaScript
let motionEnabled = true;
document.getElementById('motionToggle').addEventListener('change', (event) => {
motionEnabled = event.target.checked;
});
window.addEventListener('deviceorientation', (event) => {
if (motionEnabled) {
console.log('Điều khiển bằng chuyển động đã được kích hoạt');
}
});
c. Tuân thủ cài đặt hệ thống
Tôn trọng cài đặt hệ thống của thiết bị (ví dụ: tùy chọn giảm chuyển động trong cài đặt truy cập).
Ví dụ: Cài đặt giảm chuyển động bằng CSS
CSS
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Chỉ cung cấp điều khiển bằng chuyển động
Ví dụ thất bại
- Chỉ có thể reset bằng cách lắc thiết bị.
Vấn đề
- Không thể sử dụng đối với người dùng gặp khó khăn với điều khiển bằng chuyển động hoặc trong môi trường mà cảm biến chuyển động bị vô hiệu hóa.
Biện pháp cải thiện
- Cung cấp phương án thay thế như nút bấm hoặc mục menu.
b. Không thể vô hiệu hóa điều khiển bằng chuyển động
Ví dụ thất bại
- Điều khiển bằng chuyển động luôn được kích hoạt và không có cài đặt để vô hiệu hóa.
Vấn đề
- Có thể gây ra sự cố hoạt động sai hoặc bất tiện.
Biện pháp cải thiện
- Cung cấp tính năng chuyển đổi bật/tắt điều khiển bằng chuyển động trong màn hình cài đặt.
4. Lợi ích của khả năng truy cập (accessibility)
a. Ngăn ngừa thao tác sai
- Việc vô hiệu hóa điều khiển bằng chuyển động giúp ngăn chặn các thao tác không mong muốn.
b. Hỗ trợ cho đa dạng người dùng
- Điều này sẽ cho phép người dùng có hạn chế về chuyển động hoặc người dùng muốn thao tác trong môi trường ổn định cũng có thể sử dụng.
c. Cải thiện trải nghiệm người dùng
- Khi kết hợp với giao diện người dùng truyền thống, phương pháp điều khiển trở nên đa dạng hơn và có thêm nhiều lựa chọn.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận rằng cùng một chức năng có thể thực hiện được cả bằng điều khiển chuyển động và điều khiển giao diện người dùng truyền thống.
- Xác nhận xem cài đặt vô hiệu hóa điều khiển bằng chuyển động có hoạt động hay không.
b. Kiểm tra trình đọc màn hình
- Xác nhận xem giao diện người dùng thay thế cho điều khiển bằng chuyển động có được nhận diện chính xác hay không.
c. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra xem điều khiển bằng chuyển động có được triển khai đúng cách hay không.
Tóm tắt
Tiêu chuẩn ‘2.5.4 Điều khiển chuyển động’ trong WCAG 2.2 nhằm mục đích cung cấp các phương tiện giao diện người dùng truyền thống thay thế cho điều khiển bằng chuyển động và cung cấp cài đặt để vô hiệu hóa điều khiển bằng chuyển động nhằm ngăn ngừa thao tác sai.
Điểm cần lưu ý khi triển khai
- Cung cấp các thành phần giao diện người dùng thay thế cho điều khiển bằng chuyển động.
- Triển khai cài đặt để vô hiệu hóa điều khiển bằng chuyển động.
- Tôn trọng cài đặt hệ thống (ví dụ: giảm chuyển động).
Điều này giúp cung cấp nội dung web dễ sử dụng và dễ truy cập cho 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.