Hướng dẫn WCAG 2.2 ‘2.5.6 Cơ chế nhập liệu đồng thời’ Mức AAA
Mở đầu
Tiêu chuẩn ‘2.5.6 Cơ chế nhập liệu đồng thời’ trong WCAG 2.2 yêu cầu rằng nội dung web không được hạn chế bất kỳ phương thức nhập liệu nào có sẵn trên nền tảng (ví dụ: cảm ứng, bàn phím, chuột). Tiêu chuẩn này nhằm mục đích cho phép người dùng tự do chọn phương thức nhập liệu phù hợp nhất với họ, từ đó cung cấp trải nghiệm truy cập dễ dàng hơn.
1. Khái quát tiêu chí
Yêu cầu
Nội dung web không được hạn chế phương thức nhập liệu có sẵn trừ khi thuộc các điều kiện sau:
- Khi hạn chế là cần thiết về bản chất
(Ví dụ: Khi yêu cầu cử chỉ ký tên) - Khi cần thiết để đảm bảo an ninh
(Ví dụ: Xác thực sinh trắc học trong ứng dụng ngân hàng) - Khi cần thiết để tôn trọng cài đặt của người dùng
(Ví dụ: Cài đặt truy cập của hệ thống)
2. Phương pháp triển khai
a. Hỗ trợ nhiều phương thức nhập liệu
Nội dung web cần phải hỗ trợ tất cả các phương thức nhập liệu có sẵn trên nền tảng, bao gồm chuột, bàn phím, cảm ứng, và nhập liệu bằng giọng nói.
Ví dụ: Hỗ trợ cả chuột và bàn phím
HTML
<button id="submitButton">Gửi</button>
JavaScript
document.getElementById('submitButton').addEventListener('click', () => {
console.log('Nút đã được nhấn');
});
document.getElementById('submitButton').addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
console.log('Nút đã được điều khiển bằng bàn phím');
}
});
b. Sử dụng trình xử lý sự kiện cấp cao
Sử dụng trình xử lý sự kiện cấp cao không phụ thuộc vào phương thức nhập liệu cụ thể (ví dụ: focus, blur, click).
Ví dụ: Trình xử lý sự kiện không phụ thuộc vào phương thức nhập liệu
JavaScript
document.getElementById('inputField').addEventListener('focus', () => {
console.log('Trường nhập liệu đã được chọn');
});
c. Thiết kế không hạn chế phương thức nhập liệu
Hãy thiết kế sao cho không phụ thuộc vào phương thức nhập liệu cụ thể (ví dụ: chỉ thao tác cảm ứng), và đảm bảo rằng cùng một thao tác có thể thực hiện được bằng mọi phương thức nhập liệu.
Ví dụ: Hỗ trợ cả cảm ứng và chuột
HTML
<div id="dragArea">Khu vực kéo</div>
JavaScript
document.getElementById('dragArea').addEventListener('mousedown', () => {
console.log('Bắt đầu kéo bằng chuột');
});
document.getElementById('dragArea').addEventListener('touchstart', () => {
console.log('Bắt đầu kéo bằng thao tác cảm ứng');
});
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Hạn chế chỉ sử dụng một phương thức nhập liệu
Ví dụ thất bại
- Hạn chế thao tác trên màn hình cảm ứng chỉ sử dụng nhập liệu cảm ứng
Biện pháp cải thiện
- Bên cạnh thao tác cảm ứng, cũng cho phép thao tác bằng bàn phím và chuột
b. Chỉ sử dụng trình xử lý sự kiện phụ thuộc vào phương thức nhập liệu
Ví dụ thất bại
- Khi chỉ phụ thuộc vào sự kiện mousedown, thì không thể thao tác bằng bàn phím hoặc nhập liệu cảm ứng.
Biện pháp cải thiện
- Sử dụng trình xử lý sự kiện đa năng hơn, chẳng hạn như sự kiện click.
4. Lợi ích của khả năng truy cập (accessibility)
a. Có sẵn cho tất cả người dùng
- Bằng cách loại bỏ các hạn chế về phương thức nhập liệu, mọi người có thể sử dụng, bất kể người dùng có khuyết tật hay sự khác biệt về thiết bị.
b. Cải thiện khả năng tương thích giữa các nền tảng
- Có thể cung cấp trải nghiệm thao tác nhất quán trên các thiết bị khác nhau (ví dụ: máy tính để bàn, thiết bị di động, thiết bị điều khiển bằng giọng nói).
c. Ngăn ngừa thao tác sai
- Thông qua thiết kế không phụ thuộc vào phương thức nhập liệu cụ thể, có thể tránh được thao tác sai và hạn chế sử dụng.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận xem nội dung có thể được thao tác bằng nhiều phương thức khác nhau như bàn phím, chuột, cảm ứng, nhập liệu bằng giọng nói, v.v.
- Xác nhận xem thao tác có nhất quán hay không khi chuyển đổi giữa các phương thức nhập liệu
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra xem không có hạn chế về phương thức nhập liệu
Tóm tắt
Tiêu chuẩn ‘2.5.6 Cơ chế nhập liệu đồng thời’ trong WCAG 2.2 nhằm mục đích áp dụng thiết kế không phụ thuộc vào phương thức nhập liệu cụ thể và hỗ trợ tất cả các phương thức nhập liệu, giúp người dùng có thể thao tác nội dung bằng phương pháp phù hợp nhất với họ.
Điểm cần lưu ý khi triển khai
- Sử dụng trình xử lý sự kiện cấp cao để đảm bảo tính linh hoạt của phương thức nhập liệu.
- Hỗ trợ nhiều phương thức nhập liệu và mở rộng lựa chọn cho người dùng.
- Lưu ý thiết kế không phụ thuộc vào phương thức nhập liệu cụ thể.
Đ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.