Về Hướng dẫn WCAG 2.2, ‘2.1.1 Điều khiển bằng bàn phím’ Cấp A
Mở đầu
WCAG 2.2 ‘2.1.1 Điều khiển bằng bàn phím’ yêu cầu tất cả các chức năng của nội dung phải có thể điều khiển bằng bàn phím. Tiêu chuẩn này rất quan trọng để làm cho nội dung web có thể sử dụng được đối với người dùng không thể sử dụng chuột hoặc những người sử dụng công nghệ hỗ trợ.
Bài viết này sẽ giải thích phương pháp triển khai dễ hiểu ngay cả với người mới bắt đầu sử dụng HTML, CSS, JavaScript.
1. Tổng quan về tiêu chuẩn
Yêu cầu về điều khiển bằng bàn phím
- Tất cả các chức năng phải có thể điều khiển bằng bàn phím
- Không yêu cầu thời gian cụ thể (ví dụ: không cần phải nhấn phím nhanh).
- Trường hợp yêu cầu nhập liệu phụ thuộc vào đường dẫn là ngoại lệ (ví dụ: thao tác kéo và thả).
2. Phương pháp triển khai
a. Sử dụng các phần tử HTML tiêu chuẩn
Các phần tử gốc của HTML (ví dụ: <button>, <a>, <input>) hỗ trợ điều khiển bằng bàn phím mặc định.
Ví dụ về triển khai hợp lý
<button>Vui lòng nhấp vào</button>
<a href="https://example.com">Liên kết</a>
<input type="text" placeholder="Vui lòng nhập">
- <button>: Có thể điều khiển bằng phím Enter hoặc phím Space.
- <a>: Có thể điều khiển bằng phím Enter.
b. Sử dụng sự kiện bàn phím để làm cho các phần tử tùy chỉnh có thể điều khiển được.
Khi tạo các phần tử không chuẩn hoặc giao diện người dùng tùy chỉnh, cần phải hỗ trợ điều khiển bằng bàn phím.
Ví dụ về nút tùy chỉnh
<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!');
}
});
</script>
Điểm mấu chốt
- Sử dụng tabindex="0" để làm cho phần tử có thể nhận được tiêu điểm.
- Sử dụng role="button" để thông báo cho trình đọc màn hình rằng đây là một nút.
- Hỗ trợ phím Enter và phím Space bằng sự kiện bàn phím (keydown).
c. Kiểm soát việc di chuyển tiêu điểm một cách hợp lý
Để người dùng bàn phím có thể thao tác mượt mà, thiết lập thứ tự tiêu điểm một cách hợp lý.
Thứ tự tab hợp lý
<a href="#content">Chuyển đến nội dung chính</a>
<nav>
<a href="#section1">Phần 1</a>
<a href="#section2">Phần 2</a>
</nav>
<main id="content">
<h1>Nội dung chính</h1>
<button>Điều khiển</button>
</main>
d. Tránh các triển khai cản trở thao tác bằng bàn phím
Ví dụ thất bại
<a href="#" onclick="this.blur()">Liên kết</a>
Vấn đề
- Khi sử dụng blur để xóa tiêu điểm, người dùng bàn phím sẽ không thể thực hiện thao tác tiếp theo.
Ví dụ cải thiện
<a href="https://example.com">Liên kết</a>
e. Hỗ trợ cả sự kiện chuột và sự kiện bàn phím
Ví dụ về JavaScript
<div id="interactiveElement" tabindex="0">Phần tử có thể thao tác</div>
<script>
const element = document.getElementById('interactiveElement');
const activate = () => alert('Hành động đã được thực thi!');
element.addEventListener('click', activate);
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') activate();
});
</script>
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Chỉ sử dụng các sự kiện dành riêng cho thiết bị chỉ điểm
Ví dụ thất bại
element.addEventListener('click', () => {
console.log('Đã được nhấp');
});
Ví dụ cải thiện
- Thêm vào sự kiện click, hỗ trợ thao tác bàn phím với keydown.
b. Xóa tiêu điểm
Ví dụ thất bại
element.addEventListener('focus', () => {
element.blur();
});
Ví dụ cải thiện
- Tiêu điểm được giữ dưới sự kiểm soát của người dùng
4. Lợi ích của khả năng tiếp cận
a. Tính tương thích với công nghệ hỗ trợ
- Người dùng sử dụng trình đọc màn hình hoặc thiết bị chuyển đổi có thể sử dụng tất cả các chức năng.
b. Quan tâm đến người dùng phụ thuộc vào thao tác bàn phím
- Tất cả các thao tác chỉ thực hiện bằng bàn phím, vì vậy người dùng có thể yên tâm ngay cả trong môi trường không thể sử dụng chuột.
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 hoặc phím Space hay không.
- Xác nhận xem tiêu điểm có di chuyển mượt mà 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àn phím.
Tóm tắt
Hướng dẫn WCAG 2.2 “2.1.1 Điều khiển bằng bàn phím” yêu cầu tất cả các chức năng phải có thể điều khiển bằng bàn phím.
Điểm cần chú ý khi triển khai
- Sử dụng các phần tử HTML tiêu chuẩn và tận dụng các thao tác bàn phím mặc định.
- Thêm sự kiện bàn phím vào các phần tử tùy chỉnh và làm cho chúng có thể thao tác được.
- Quản lý việc di chuyển tiêu điểm một cách hợp lý để người dùng có thể thao tác mượt mà.
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.