Hướng dẫn WCAG 2.2 ‘2.1.4 Phím tắt bằng chữ cái’ Mức độ A
Mở đầu
Trong WCAG 2.2, tiêu chí “2.1.4 Phím tắt bằng chữ cái” yêu cầu sử dụng phím tắt bằng chữ cái đơn (chữ cái, số, ký hiệu, v.v.) phải được thiết kế sao cho không gây cản trở cho người dùng trong quá trình thao tác. Tiêu chí này nhằm ngăn ngừa việc phím tắt gây ra sự cố và đảm bảo một thiết kế dễ sử dụng.
1. Tổng quan về tiêu chí
Điều kiện áp dụng
- Khi sử dụng phím chữ cái đơn (A～Z, số, ký hiệu, v.v.) làm phím tắt.
Yêu cầu
Cần phải đáp ứng một trong các yêu cầu sau:
-
Có thể tắt（Turn off）
- Cung cấp cơ chế để vô hiệu hóa phím tắt.
-
Có thể thay đổi lại phím（Remap）
- Cung cấp cơ chế để thay đổi phím tắt thành các phím kết hợp với Ctrl hoặc Alt.
-
Chỉ có hiệu lực khi có tiêu điểm（Active only on focus）
- Phím tắt chỉ có hiệu lực khi tiêu điểm đang ở trên thành phần đó.
2. Phương pháp triển khai
a. Cung cấp cơ chế để tắt phím tắt
Ví dụ về JavaScript
<button id="toggleShortcut">Tắt phím tắt</button>
<textarea id="textArea" placeholder="Vui lòng nhập vào đây"></textarea>
let isShortcutEnabled = true;
document.addEventListener('keydown', (event) => {
if (isShortcutEnabled && event.key === 'a') {
alert('Phím A đã được nhấn!');
}
});
document.getElementById('toggleShortcut').addEventListener('click', () => {
isShortcutEnabled = !isShortcutEnabled;
alert("Phím tắt đã ${isShortcutEnabled ? 'được bật' : 'được tắt");
});
b. Cho phép remap phím tắt
Cung cấp cơ chế để người dùng có thể thay đổi phím tắt.
Ví dụ về remap
<label for="shortcutKey">Phím tắt mới:</label>
<input type="text" id="shortcutKey" maxlength="1">
<textarea id="textArea" placeholder="Vui lòng nhập vào đây"></textarea>
let shortcutKey = 'a';
document.addEventListener('keydown', (event) => {
if (event.key === shortcutKey) {
alert("Phím ${shortcutKey.toUpperCase()} đã được nhấn!");
}
});
document.getElementById('shortcutKey').addEventListener('input', (event) => {
shortcutKey = event.target.value.toLowerCase();
alert("Phím tắt mới là "${shortcutKey.toUpperCase()}".");
});
c. Chỉ kích hoạt phím tắt khi có tiêu điểm
Chỉ kích hoạt phím tắt khi tiêu điểm đang ở trên một phần tử cụ thể.
Ví dụ
<textarea id="textArea" placeholder="Vui lòng nhập vào đây"></textarea>
const textArea = document.getElementById('textArea');
textArea.addEventListener('keydown', (event) => {
if (event.key === 'a') {
alert("Phím A đã được nhấn trong khu vực nhập văn bản!");
}
});
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Phím tắt luôn có hiệu lực và gây ra sự cố
Ví dụ thất bại
document.addEventListener('keydown', (event) => {
if (event.key === 'a') {
alert('Phím A đã được nhấn!');
}
});
Vấn đề
- Có thể gây ra sự cố khi nhập văn bản
Ví dụ cải thiện
- Chỉ kích hoạt phím tắt khi có tiêu điểm.
b. Không thể vô hiệu hóa hoặc remap phím tắt
Ví dụ thất bại
- Phím tắt cố định đã được thiết lập và không có tùy chọn để thay đổi hoặc vô hiệu hóa.
Ví dụ cải thiện
- Thêm chức năng tùy chỉnh phím tắt
4. Lợi ích của khả năng tiếp cận
a. Cải thiện trải nghiệm người dùng
- Phím tắt sẽ không gây ra sự cố và người dùng có thể sử dụng một cách tự do
b. Đối phó với người dùng cần sự chú ý đặc biệt
- Chú ý đến người dùng có khuyết tật thị giác hoặc vận động, và ngăn ngừa các thao tác không mong muốn.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận rằng phím tắt không gây ra sự cố
- Xác nhận rằng chức năng bật/tắt phím tắt hoạt động đúng
- Xác nhận rằng việc remap phím tắt hoạt động đúng
b. Công cụ kiểm tra tự động
- Hiện tại, kiểm tra thủ công là phương pháp chủ yếu. Trạng thái của phím tắt có thể khó kiểm tra bằng công cụ tự động.
Tóm tắt
Tiêu chí ‘2.1.4 Phím tắt bằng chữ cái’ trong WCAG 2.2 nhằm mục đích ngăn ngừa các phím tắt sử dụng phím chữ cái đơn gây ra sự cố.
Điểm cần chú ý khi triển khai
- Cung cấp cơ chế để vô hiệu hóa hoặc remap phím tắt.
- Chỉ kích hoạt phím tắt khi có tiêu điểm.
- Ngăn ngừa sự cố và thiết kế sao cho không cản trở thao tác của người dùng.
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.