Nguyên tắc WCAG 2.2 ‘2.1.2 Không có bẫy bàn phím’ Cấp A
Mở đầu
Trong WCAG 2.2, “2.1.2 Không có bẫy bàn phím” yêu cầu ngăn chặn việc tập trung bàn phím bị giam giữ trong một thành phần cụ thể (bị bẫy). Tiêu chí này rất quan trọng để đảm bảo người dùng chỉ sử dụng bàn phím có thể sử dụng toàn bộ trang web một cách mượt mà.
1. Tổng quan về tiêu chí
Bẫy bàn phím là gì?
- Bẫy bàn phím ám chỉ tình trạng khi người dùng cố gắng di chuyển tiêu điểm bằng phím Tab hoặc các phím mũi tên, nhưng không thể thoát ra khỏi một yếu tố hoặc khu vực cụ thể.
Yêu cầu
-
Cho phép di chuyển tiêu điểm
Khi tiêu điểm có thể di chuyển đến một thành phần cụ thể bằng bàn phím, thì cần phải có khả năng di chuyển từ đó đến thành phần khác. -
Thông báo khi cần thao tác đặc biệt
Khi việc di chuyển tiêu điểm yêu cầu thao tác không theo chuẩn, cần phải thông báo cho người dùng cách thực hiện thao tác đó.
2. Phương pháp triển khai
a. Cho phép di chuyển tiêu điểm bằng cách điều hướng chuẩn.
Thiết kế sao cho tiêu điểm có thể di chuyển bằng phím Tab thông thường hoặc Shift+Tab.
Ví dụ về mẫu form thích hợp
<form>
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
- Mã trên sẽ di chuyển tiêu điểm theo thứ tự từ ô nhập tên → ô nhập email → nút gửi khi sử dụng phím Tab.
b. Kiểm soát tiêu điểm trong hộp thoại modal
Khi sử dụng hộp thoại modal, khi nhấn phím Tab trong hộp thoại, tiêu điểm sẽ di chuyển theo vòng, và người dùng có thể đóng hộp thoại bằng phím Esc.
Điều khiển modal bằng JavaScript
<button id="openModal">Mở modal</button>
<div id="modal" role="dialog" aria-hidden="true">
<button id="closeModal">Đóng</button>
<input type="text" placeholder="Ô nhập liệu">
</div>
const modal = document.getElementById('modal');
const openModalButton = document.getElementById('openModal');
const closeModalButton = document.getElementById('closeModal');
openModalButton.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'false');
closeModalButton.focus();
});
closeModalButton.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'true');
openModalButton.focus();
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
modal.setAttribute('aria-hidden', 'true');
openModalButton.focus();
}
});
- Để ngăn chặn việc tiêu điểm bị giam giữ trong modal, sử dụng thuộc tính aria-hidden để chuyển đổi trạng thái hiển thị.
- Cho phép đóng modal bằng phím Esc.
c. Quản lý tiêu điểm trong thành phần một cách hợp lý
Cách tạo vòng lặp tiêu điểm
Khi nhấn phím Tab trong một khu vực cụ thể, thiết lập để tiêu điểm quay lại từ phần tử cuối cùng đến phần tử đầu tiên.
const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modal = document.getElementById('modal');
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0];
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1];
document.addEventListener('keydown', (event) => {
if (event.key === 'Tab') {
if (event.shiftKey) {
// Khi cố gắng quay lại từ phần tử đầu tiên bằng Shift + Tab
if (document.activeElement === firstFocusableElement) {
event.preventDefault();
lastFocusableElement.focus();
}
} else {
// Khi cố gắng di chuyển từ phần tử cuối cùng bằng phím Tab
if (document.activeElement === lastFocusableElement) {
event.preventDefault();
firstFocusableElement.focus();
}
}
}
});
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Tiêu điểm bị cố định
Ví dụ thất bại
<div tabindex="0">
<button>Nút 1</button>
<button>Nút 2</button>
</div>
Vấn đề
- Tiêu điểm bị cố định trong container và không thể di chuyển đến các yếu tố khác.
Ví dụ cải thiện
- Thiết kế sao cho có thể di chuyển đến các yếu tố khác bằng bàn phím
b. Chỉ có thể di chuyển tiêu điểm bằng phương pháp đặc biệt
Ví dụ thất bại
- Chỉ cho phép di chuyển tiêu điểm bằng các phím tắt cụ thể.
Ví dụ cải thiện
- Cho phép di chuyển bằng phím Tab chuẩn và Shift+Tab.
4. Lợi ích của khả năng tiếp cận
a. Lưu ý đến người dùng bàn phím
- Người dùng không thể sử dụng chuột cũng có thể truy cập tất cả các nội dung
b. Cải thiện trải nghiệm người dùng
- Có thể điều khiển toàn bộ trang một cách mượt mà.
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 rằng tiêu điểm không bị giam giữ trong một khu vực cụ thể.
- Xác nhận rằng modal có đóng được bằng phím Esc không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra khả năng tiếp cận bằng bàn phím.
Tóm tắt
Nguyên tắc ‘2.1.2 Không có bẫy bàn phím’ trong WCAG 2.2 yêu cầu người dùng bàn phím có thể tự do điều khiển toàn bộ trang web.
Điểm cần chú ý khi triển khai
- Hỗ trợ di chuyển tiêu điểm theo chuẩn và ngăn chặn bẫy tiêu điểm.
- Cho phép tiêu điểm di chuyển theo vòng trong modal và giao diện người dùng tùy chỉnh.
- Thông báo khi cần phương pháp đặc biệt để di chuyển tiêu điểm.
Bằng cách thực hiện những điều này, chúng ta có thể tạo ra một môi trường giúp tất cả người dùng có thể sử dụng nội dung web một cách thoải má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.