Về Hướng dẫn WCAG 2.2 – Mục 2.4.7: Khả năng hiển thị của tiêu điểm (Level AA)
Mở đầu
Mục 2.4.7 “Khả năng hiển thị của tiêu điểm” trong WCAG 2.2 yêu cầu rằng mọi thành phần giao diện người dùng có thể thao tác bằng bàn phím phải hiển thị rõ ràng tiêu điểm khi nó được chọn. Tiêu chí này nhằm giúp người dùng sử dụng bàn phím hoặc người khiếm thị dễ dàng nhận biết được thành phần nào đang được tiêu điểm hiện tại.
1. Khái quát tiêu chí
Yêu cầu
- Giao diện có thể thao tác bằng bàn phím phải có chỉ báo tiêu điểm có thể nhận biết được bằng mắt.
- Không được làm mất hoặc làm mờ chỉ báo tiêu điểm mặc định.
2. Phương pháp triển khai
a. Thiết lập chỉ báo tiêu điểm bằng CSS
Thiết lập kiểu tiêu điểm cơ bản
CSS
button:focus, a:focus {
outline: 2px solid blue; /* Hiển thị đường viền màu xanh khi có tiêu điểm */
outline-offset: 2px; /* Đặt đường viền cách một chút so với phần tử */
}
- Với đoạn mã này, các nút hoặc liên kết khi được focus sẽ hiển thị rõ ràng.
b. Cung cấp kiểu tiêu điểm tùy chỉnh
Ngay cả khi ghi đè kiểu tiêu điểm mặc định, chỉ báo tiêu điểm vẫn phải rõ ràng và có độ tương phản đủ cao.
Ví dụ: Kiểu tiêu điểm thay đổi màu nền
CSS
input:focus {
background-color: lightyellow; /* Thay đổi màu nền */
border: 2px solid green; /* Thêm đường viền */
}
- Bằng cách thay đổi màu nền hoặc đường viền, bạn giúp người dùng dễ dàng nhận biết sự thay đổi trực quan.
c. Thay đổi kiểu tiêu điểm một cách động bằng script
Sử dụng JavaScript để tùy chỉnh kiểu của phần tử được focus một cách động.
Ví dụ: Thay đổi kiểu tiêu điểm bằng script
HTML
<button id="customButton">Hãy thử chuyển tiêu điểm vào (focus) để xem hiệu ứng</button>
JavaScript
const button = document.getElementById('customButton');
button.addEventListener('focus', () => {
button.style.border = '3px dashed orange';
});
button.addEventListener('blur', () => {
button.style.border = '';
});
- Thay đổi đường viền khi có tiêu điểm giúp người dùng dễ dàng nhận biết bằng thị giác.
d. Tôn trọng kiểu tiêu điểm mặc định
Trên một số thiết bị hoặc trình duyệt nhất định, chỉ báo tiêu điểm mặc định đã được thiết kế tối ưu. Trong những trường hợp như vậy, nên giữ nguyên và sử dụng mặc định đó.
Ví dụ: Sử dụng kiểu tiêu điểm mặc định
Bằng cách không chỉ định kiểu đặc biệt, bạn có thể sử dụng kiểu tiêu điểm mặc định của trình duyệt hoặc hệ điều hành.
CSS
button:focus {
outline: auto; /* Sử dụng kiểu tiêu điểm mặc định của trình duyệt */
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Tiêu điểm bị ẩn hoặc không rõ ràng
Ví dụ thất bại
button:focus {
outline: none; /* Xóa hoàn toàn kiểu tiêu điểm */
}
Biện pháp cải thiện
- Không xóa hoàn toàn kiểu tiêu điểm, mà nên cung cấp một chỉ báo nổi bật để dễ nhận biết.
button:focus {
outline: 2px solid #00f; /* Thêm đường viền rõ ràng */
}
b. Thiếu độ tương phản
Ví dụ thất bại
button:focus {
outline: 1px solid lightgray; /* Màu khó nhìn */
}
Biện pháp cải thiện
- Chọn màu có độ tương phản đủ cao
button:focus {
outline: 2px solid #000; /* Độ tương phản cao với màu đen */
}
4. Lợi ích của khả năng truy cập (accessibility)
a. Quan tâm đến người dùng sử dụng bàn phím
- Khi tiêu điểm hiển thị rõ ràng, người dùng sử dụng bàn phím có thể dễ dàng nhận biết vị trí hiện tại chỉ bằng một cái nhìn.
b. Hỗ trợ cho người khiếm thị
- Việc hiển thị rõ vị trí tiêu điểm giúp cung cấp manh mối trực quan cho người khiếm thị.
c. Điều hướng mượt mà
- Khi tiêu điểm có thể nhìn thấy rõ ràng, người dùng có thể thao tác dễ dàng mà không gặp căng thẳng.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Sử dụng bàn phím (phím Tab) để kiểm tra xem tiêu điểm có di chuyển đến tất cả các thành phần tương tác hay không.
- Kiểm tra xem chỉ báo tiêu điểm trực quan có phù hợp hay không.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra xem chỉ báo tiêu điểm đã được triển khai đúng cách hay chưa.
c. Công cụ kiểm tra màu sắc hình ảnh
- Kiểm tra xem kiểu tiêu điểm có đủ độ tương phản với nền hay không.
Tóm tắt
Mục 2.4.7 “Khả năng hiển thị của tiêu điểm” trong WCAG 2.2 nhằm đảm bảo rằng tiêu điểm có thể nhìn thấy rõ ràng khi sử dụng bàn phím.
Điểm cần lưu ý khi triển khai
- Thiết lập kiểu tiêu điểm rõ ràng bằng CSS.
- Đảm bảo độ tương phản đủ cao và sử dụng kiểu tiêu điểm dễ nhìn.
- Không xóa kiểu tiêu điểm mặc định, mà thay vào đó, tùy chỉnh khi cần thiết.
Đ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.