Hướng dẫn WCAG 2.2 “2.4.13 Diện mạo của Focus” Cấp AAA
Mở đầu
Tiêu chí “2.4.13 Diện mạo của Focus” trong WCAG 2.2 yêu cầu dấu hiệu focus hiển thị khi thao tác bằng bàn phím phải đủ nổi bật và có thể xác nhận trực quan. Tiêu chí này nhằm mục đích giúp người dùng, đặc biệt là những người khiếm thị hoặc có thị lực yếu, có thể nhận diện chính xác yếu tố mà họ đang focus.
1. Khái quát tiêu chí
Yêu cầu
Một phần của dấu hiệu focus cần phải đáp ứng các điều kiện sau:
- Dấu hiệu focus phải được hiển thị rõ ràng
- Tỷ lệ tương phản phải đủ cao
- Kích thước của dấu hiệu phải đủ lớn
- Dấu hiệu phải không bị che khuất về mặt trực quan.
2. Phương pháp triển khai
a. Sử dụng CSS để thiết lập kiểu dáng focus dễ nhìn
Ví dụ: Dấu hiệu focus đơn giản và dễ nhìn
CSS
button:focus, a:focus {
outline: 3px solid #005fcc; /* Đường viền nổi bật với màu xanh sáng */
outline-offset: 2px; /* Vẽ đường viền ở vị trí cách yếu tố một chút */
}
- Đặt độ dày của đường viền từ 3px trở lên để tạo sự nổi bật về mặt trực quan.
- Sử dụng outline-offset để làm rõ sự phân biệt với yếu tố.
b. Đảm bảo tỷ lệ tương phản
Tỷ lệ tương phản giữa dấu hiệu focus và nền phải đảm bảo ít nhất 3:1
Ví dụ: dấu hiệu focus có tỷ lệ tương phản đủ lớn
CSS
input:focus {
border: 3px solid #FFD700; /* Màu vàng với tỷ lệ tương phản cao */
}
c. Sử dụng dấu hiệu focus với hai màu
Việc sử dụng hai màu cho dấu hiệu focus giúp tăng cường khả năng nhìn thấy, bất kể màu sắc của nền hay các yếu tố xung quanh.
Ví dụ: dấu hiệu focus với hai màu
CSS
button:focus {
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #005fcc; /* Đổ bóng đôi với màu trắng ở phía trong và màu xanh ở phía ngoài */
}
- Kết hợp màu sắc của phần trong và phần ngoài để đảm bảo tỷ lệ tương phản.
d. Đảm bảo kích thước của dấu hiệu
Đảm bảo rằng dấu hiệu focus không quá nhỏ. Ví dụ, đảm bảo rằng dấu hiệu bao quanh yếu tố ít nhất 2px.
e. Cung cấp cơ chế cho phép người dùng tùy chỉnh
Cho phép người dùng thay đổi màu sắc và độ dày của dấu hiệu focus.
Ví dụ: Tùy chọn tùy chỉnh
HTML
<div>
<label for="color">Màu sắc của focus:</label>
<input type="color" id="color" value="#005fcc">
</div>
JavaScript
const input = document.getElementById('color');
input.addEventListener('change', (e) => {
document.documentElement.style.setProperty('--focus-color', e.target.value);
});
CSS
button:focus {
outline: 3px solid var(--focus-color, #005fcc);
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Dấu hiệu focus quá nhỏ
Ví dụ thất bại
button:focus {
outline: 1px solid gray;
}
Vấn đề
- Đường viền quá mỏng, khiến nó hòa vào nền.
Biện pháp cải thiện
button:focus {
outline: 3px solid #005fcc;
}
b. Thiếu tỷ lệ tương phản
Ví dụ thất bại
button:focus {
outline: 2px solid lightgray;
}
Vấn đề
- Tỷ lệ tương phản giữa dấu hiệu focus và nền là không đủ
Biện pháp cải thiện
button:focus {
outline: 2px solid #FF0000; /* Đảm bảo tỷ lệ tương phản đủ với màu đỏ */
}
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện trải nghiệm người dùng
- Khi yếu tố được focus hiển thị rõ ràng, người dùng có thể dễ dàng xác định vị trí hiện tại của mình trong quá trình thao tác.
b. Quan tâm đến người dùng bàn phím
- Người dùng sử dụng điều hướng bằng bàn phím sẽ không bao giờ bị mất dấu yếu tố đang thao tác.
c. Đáp ứng nhu cầu đa dạng của người dùng
- Dấu hiệu focus có tỷ lệ tương phản cao và có thể tùy chỉnh giúp hỗ trợ người dùng khiếm thị hoặc có vấn đề về nhận thức màu sắc.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Di chuyển focus bằng bàn phím (phím Tab)
- Kiểm tra xem dấu hiệu focus có đủ nổi bật và dễ nhìn hay không
b. Kiểm tra tỷ lệ tương phản
- Sử dụng công cụ kiểm tra tỷ lệ tương phản (ví dụ: Contrast Checker) để kiểm tra tỷ lệ tương phản giữa dấu hiệu focus và nền.
c. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra tính hợp lệ của dấu hiệu focus.
Tóm tắt
Tiêu chí “2.4.13 Diện mạo của Focus” trong WCAG 2.2 nhằm mục đích cung cấp dấu hiệu focus dễ nhìn, giúp tất cả người dùng có thể dễ dàng nhận biết vị trí thao tác hiện tại.
Điểm cần lưu ý khi triển khai
- Sử dụng CSS để tạo dấu hiệu focus có độ dày từ 3px trở lên và dễ nhìn.
- Đặt tỷ lệ tương phản với nền ít nhất là 3:1
- Cung cấp dấu hiệu focus với hai màu hoặc các tùy chọn tùy chỉnh.
Đ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.