Hướng dẫn WCAG 2.2 ‘2.4.11 Focus không bị ẩn (Tối thiểu)’ Cấp AA
Mở đầu
Tiêu chí “2.4.11 Focus không bị ẩn (Tối thiểu)” trong WCAG 2.2 yêu cầu khi thao tác bằng bàn phím, các yếu tố được focus không bị che khuất hoàn toàn do ảnh hưởng của nội dung hoặc thiết kế. Tiêu chí này nhằm mục đích giúp người dùng bàn phím dễ dàng xác định các yếu tố hiện tại mà họ đang focus.
1. Khái quát tiêu chí
Yêu cầu
- Yếu tố được focus khi thao tác bằng bàn phím không bị che khuất hoàn toàn bởi nội dung do nhà phát triển tạo ra.
- Nếu cần thiết, hãy đảm bảo rằng yếu tố được focus có thể nhìn thấy thông qua việc cuộn hoặc điều chỉnh vị trí.
Lưu ý
- Đối với nội dung có thể di chuyển, vị trí ban đầu của nó sẽ là đối tượng kiểm tra.
- Ngay cả khi nội dung do người dùng mở tạm thời che khuất focus, miễn là focus có thể được hiển thị lại mà không cần thao tác bàn phím, thì sẽ không có vấn đề.
2. Phương pháp triển khai
a. Sử dụng scroll-padding trong CSS
Cài đặt scroll-padding để đảm bảo rằng yếu tố được focus không bị che khuất khi cuộn.
Ví dụ: Căn chỉnh yếu tố được focus với vị trí cuộn
CSS
html {
scroll-padding-top: 50px; /* Đảm bảo khoảng cách cho phần đầu trang cố định */
}
Cài đặt này đảm bảo rằng ngay cả khi có phần đầu trang cố định, yếu tố được focus cũng sẽ không bị che khuất và vẫn được hiển thị.
b. Điều chỉnh cuộn bằng JavaScript
Khi yếu tố được focus bị che khuất, sử dụng JavaScript để điều chỉnh vị trí cuộn.
Ví dụ: Điều chỉnh vị trí cuộn bằng JavaScript
JavaScript
document.querySelectorAll('a, button, input').forEach(element => {
element.addEventListener('focus', () => {
element.scrollIntoView({ block: 'center' });
});
});
- Sử dụng phương thức scrollIntoView để đảm bảo rằng yếu tố được focus luôn nằm trong tầm nhìn.
c. Thiết kế tránh phần đầu trang và chân trang cố định
Khi phần đầu trang và chân trang cố định có thể che khuất focus, cần điều chỉnh thiết kế để ngăn chặn vấn đề này.
例: 固定ヘッダーがある場合の対応
CSS
header {
position: fixed;
top: 0;
height: 60px;
width: 100%;
z-index: 1000;
}
main {
margin-top: 60px; /* ヘッダー分の余白を確保 */
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Phần đầu trang cố định che khuất focus.
Ví dụ thất bại
- Phần đầu trang cố định hoàn toàn che khuất yếu tố được focus.
Biện pháp cải thiện
- Cài đặt scroll-padding
- Thêm một đoạn mã để điều chỉnh vị trí cuộn
b. Modal hoặc popup che khuất focus
Ví dụ thất bại
- Yếu tố được focus bị che khuất bởi modal hoặc popup
Biện pháp cải thiện
- Khi popup hiển thị, triển khai đoạn mã để di chuyển focus đến vị trí có thể nhìn thấy
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện khả năng sử dụng cho người dùng bàn phím
- Yếu tố được focus sẽ dễ dàng được xác nhận về mặt trực quan, giúp việc điều hướng trở nên hiệu quả hơn.
b. Cung cấp các dấu hiệu trực quan
- Việc không để yếu tố hiện tại đang thao tác bị che khuất giúp tất cả người dùng dễ dàng nắm bắt trạng thái của trang.
c. Tính nhất quán trong thiết kế
- Nội dung sẽ hiển thị đúng cách, giúp thiết kế tổng thể trở nên hài hòa.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem yếu tố được focus có thể được xác nhận trực quan khi sử dụng bàn phím (phím Tab) hay không.
- Kiểm tra xem phần đầu trang cố định hoặc popup có che khuất yếu tố được focus hay không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra chỉ báo focus (focus indicator) và vị trí cuộn (scroll position).
c. Kiểm tra với màn hình đọc (screen reader test)
- Kiểm tra xem focus có được đọc chính xác bằng màn hình đọc (screen reader) hay không.
Tóm tắt
Tiêu chí “2.4.11 Focus không bị ẩn (Tối thiểu)” trong WCAG 2.2 nhằm mục đích đảm bảo rằng focus không bị che khuất hoàn toàn khi thao tác bằng bàn phím.
Điểm cần lưu ý khi triển khai
- Sử dụng scroll-padding trong CSS để điều chỉnh vị trí cuộn.
- Áp dụng thiết kế sao cho phần đầu trang và chân trang cố định không che khuất focus.
- Sử dụng JavaScript để điều chỉnh vị trí cuộn một cách động.
Đ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.