Hướng dẫn WCAG 2.2 ‘2.1.3 Thao tác bằng bàn phím (không có ngoại lệ)’ Cấp AAA
Mở đầu
Nguyên tắc ‘2.1.3 Thao tác bằng bàn phím (không có ngoại lệ)’ trong WCAG 2.2 yêu cầu tất cả các chức năng của nội dung phải có thể thao tác được bằng bàn phím mà không có ngoại lệ. Tiêu chí này được thiết lập để cung cấp khả năng sử dụng hoàn toàn chỉ với thao tác bàn phím, đảm bảo tất cả người dùng có thể sử dụng nội dung web một cách công bằng.
1. Tổng quan về tiêu chí
Yêu cầu bắt buộc
- Tất cả các chức năng đều có thể thao tác bằng bàn phím**
- Không yêu cầu thời gian cụ thể cho mỗi lần nhập phím**
Lưu ý đặc biệt
- Trong trường hợp cần nhập liệu phụ thuộc vào đường dẫn (ví dụ: kéo và thả hoặc nhập liệu bằng tay), tiêu chí này không thể được đáp ứng.
- Đây là tiêu chí cấp AAA, yêu cầu rất nghiêm ngặt.
2. Phương pháp triển khai
a. Sử dụng thao tác bàn phím chuẩn
Các yếu tố chuẩn của HTML (ví dụ: <button>, <a>, <input>) hỗ trợ thao tác bằng bàn phím. Việc tận dụng chúng sẽ giúp dễ dàng đáp ứng các tiêu chí.
Ví dụ thích hợp
<button>Gửi</button>
<a href="#content">Di chuyển đến nội dung</a>
<input type="text" placeholder="Vui lòng nhập tên">
b. Triển khai thao tác bàn phím trong các thành phần UI tùy chỉnh
Khi sử dụng các thành phần tùy chỉnh, thêm mã để hỗ trợ thao tác bằng bàn phím.
Triển khai nút tùy chỉnh bằng JavaScript
<div tabindex="0" role="button" id="customButton">Nút tùy chỉnh</div>
<script>
const customButton = document.getElementById('customButton');
customButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
alert('Nút đã được nhấn!');
}
});
customButton.addEventListener('click', () => {
alert('Có thể thao tác bằng chuột!');
});
</script>
Điểm mấu chốt
- Sử dụng tabindex=‘0’ để làm cho phần tử có thể nhận tiêu điểm.
- Sử dụng role=‘button’ để thông báo vai trò cho trình đọc màn hình.
- Cho phép thao tác bằng phím Enter và phím Space.
c. Triển khai không phụ thuộc vào thời gian nhập liệu
Loại bỏ các thao tác yêu cầu thời gian cụ thể và cung cấp đủ thời gian cho việc nhập phím.
Ví dụ về nhập liệu thích hợp
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
console.log('Thao tác hướng phải đã được kích hoạt');
}
});
- Không yêu cầu nhập liệu liên tục, mà đảm bảo thao tác hoàn thành với một lần nhập
d. Cung cấp phương thức thay thế cho kéo và thả
Vì thao tác kéo và thả bằng chuột không thể tái hiện bằng bàn phím, chúng tôi cung cấp phương án thay thế.
Ví dụ về triển khai có thể di chuyển bằng bàn phím
<div id="draggable" tabindex="0" style="width: 100px; height: 100px; background-color: lightblue;">Hộp có thể di chuyển</div>
<script>
const draggable = document.getElementById('draggable');
let position = 0;
draggable.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
position += 10;
draggable.style.transform = `translateX(${position}px)`;
}
if (event.key === 'ArrowLeft') {
position -= 10;
draggable.style.transform = `translateX(${position}px)`;
}
});
</script>
Điểm mấu chốt
- Cho phép di chuyển bằng phím mũi tên và cung cấp phương án thay thế thao tác kéo và thả bằng bàn phím.
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Chỉ phụ thuộc vào sự kiện chuột
Ví dụ thất bại
element.addEventListener('click', () => {
console.log('Đã được nhấn');
});
Vấn đề
- Phụ thuộc vào thao tác chuột và không xem xét thao tác bàn phím
Ví dụ cải thiện
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Có thể thao tác bằng bàn phím');
}
});
b. Yếu tố tùy chỉnh không thể nhận tiêu điểm
Ví dụ thất bại
<div role="button">Nút</div>
Vấn đề
- Do không chỉ định tabindex, nên không thể di chuyển tiêu điểm bằng bàn phím.
Ví dụ cải thiện
<div role="button" tabindex="0">Nút</div>
c. Nhập liệu yêu cầu thời gian cụ thể
Ví dụ thất bại
- Thao tác nhấn liên tiếp một phím cụ thể trong một khoảng thời gian nhất định.
Ví dụ cải thiện
- Thay đổi thiết kế sao cho không yêu cầu thời gian cụ thể để hoàn thành thao tác.
4. Lợi ích của khả năng tiếp cận
a. Đáp ứng sự đa dạng của người dùng
- Đáp ứng người dùng chỉ sử dụng bàn phím để truy cập nội dung web.
- Có thể truy cập được đối với người dùng sử dụng công nghệ hỗ trợ.
b. Cải thiện trải nghiệm người dùng
- Cung cấp thao tác trực quan và nhất quán.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Di chuyển tiêu điểm bằng phím Tab
- Xác nhận xem có thể thao tác bằng phím Enter và phím Space hay không
- Xác nhận xem thao tác bằng phím mũi tên có hoạt động đúng cách hay không
b. Công cụ kiểm tra tự động
- Kiểm tra khả năng tiếp cận thao tác bằng bàn phím bằng các công cụ như Axe và WAVE
Tóm tắt
Nguyên tắc ‘2.1.3 Thao tác bằng bàn phím (không có ngoại lệ)’ trong WCAG 2.2 yêu cầu tất cả các chức năng đều có thể hoàn toàn thao tác bằng bàn phím.
Điểm cần chú ý khi triển khai
- Tận dụng các yếu tố HTML chuẩn và đảm bảo thao tác bàn phím mặc định.
- Triển khai sự kiện bàn phím trong các yếu tố tùy chỉnh.
- Loại bỏ các thao tác phụ thuộc vào thời gian và cung cấp phương án thay thế.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web dễ sử dụng 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.