WCAG 2.2 Hướng dẫn ‘2.4.12 Focus không bị ẩn (Tăng cường)’ Cấp AAA
Mở đầu
Tiêu chí “2.4.12 Focus không bị ẩn (Tăng cường)” trong WCAG 2.2 yêu cầu khi thao tác bằng bàn phím, không để bất kỳ phần nào của yếu tố được focus bị che khuất. Tiêu chí này nhằm đảm bảo rằng yếu tố được focus được hiển thị hoàn toàn và người dùng có thể nhận diện rõ ràng yếu tố đang được thao tác.
1. Khái quát tiêu chí
Yêu cầu
- Khi thao tác bằng bàn phím, yếu tố được focus không bị che khuất một phần nào bởi nội dung do nhà phát triển tạo ra (như header, footer, popup, v.v.)
- Toàn bộ yếu tố được focus luôn được hiển thị hoàn toàn trên màn hình
Lưu ý
- Nếu phần đầu trang cố định, chân trang, popup quảng cáo hoặc các yếu tố khác che khuất một phần của yếu tố được focus, thì sẽ không đáp ứng được tiêu chí này.
2. Phương pháp triển khai
a. Sử dụng scroll-padding trong CSS
Sử dụng thuộc tính scroll-padding để đảm bảo rằng yếu tố được focus không bị che khuất khi cuộn trang, bằng cách tạo ra khoảng cách thích hợp.
Ví dụ: Điều chỉnh cuộn để tương thích với phần đầu trang cố định
CSS
html {
scroll-padding-top: 60px; /* Đảm bảo khoảng cách bằng chiều cao của phần đầu trang cố định */
scroll-padding-bottom: 20px; /* Đảm bảo khoảng cách bằng chiều cao của phần chân trang cố định */
}
b. Điều chỉnh vị trí focus một cách động bằng JavaScript
Sử dụng phương thức scrollIntoView để điều chỉnh cuộn sao cho yếu tố được focus được hiển thị hoàn toàn.
Ví dụ: Điều chỉnh vị trí cuộn bằng JavaScript
JavaScript
document.querySelectorAll('a, button, input, textarea').forEach(element => {
element.addEventListener('focus', () => {
element.scrollIntoView({ block: 'center', inline: 'nearest' });
});
});
- Đoạn mã này đảm bảo rằng yếu tố được focus luôn hiển thị ở trung tâm của màn hình.
c. Thiết kế tránh phần đầu trang và chân trang cố định
Cài đặt khoảng cách và lề phù hợp để đảm bảo rằng phần đầu trang và chân trang cố định không che khuất focus.
Ví dụ: Cài đặt khoảng cách phù hợp dựa trên chiều cao của phần đầu trang cố định
CSS
header {
position: fixed;
top: 0;
height: 60px;
width: 100%;
z-index: 1000;
}
main {
margin-top: 60px; /* Xem xét chiều cao của phần đầu trang */
}
d. Điều chỉnh hiển thị của popup và overlay
Cần thiết kế sao cho ngay cả khi popup hoặc overlay hiển thị, yếu tố được focus vẫn luôn được hiển thị hoàn toàn.
Ví dụ: Đặt popup một cách hợp lý
CSS
.modal {
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
max-height: 80%;
overflow: auto;
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Chân trang cố định che khuất focus
Ví dụ thất bại
- Do chân trang cố định, một phần của yếu tố được focus bị che khuất.
Biện pháp cải thiện
- Cài đặt scroll-padding-bottom
- Thêm đoạn mã điều chỉnh vị trí cuộn dựa trên chiều cao của chân trang cố định
b. Popup quảng cáo che khuất focus
Ví dụ thất bại
- Yếu tố được focus bị che khuất một phần bởi popup quảng cáo.
Biện pháp cải thiện
- Đặt popup ở cạnh màn hình hoặc di chuyển yếu tố được focus ra ngoài popup.
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện các dấu hiệu trực quan
- Khi yếu tố được focus hiển thị hoàn toàn, người dùng có thể dễ dàng nhận diện được yếu tố mà họ đang thao tác.
b. Cải thiện khả năng sử dụng cho người dùng bàn phím
- Khi thao tác bằng bàn phím, người dùng nhận được phản hồi trực quan rõ ràng, giúp việc điều hướng trở nên mượt mà.
c. Tính nhất quán trên tất cả các thiết bị
- Thiết kế sao cho yếu tố được focus hiển thị hoàn toàn ngay cả trên các thiết bị di động hoặc màn hình nhỏ, từ đó nâng cao trải nghiệm người dùng.
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 yếu tố được focus có hiển thị hoàn toàn không.
- Kiểm tra xem popup hoặc phần đầu trang cố định có che khuất focus 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 tính hợp lệ của việc hiển thị focus và vị trí cuộn.
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ởi màn hình đọc (screen reader) và không bị che khuất về mặt trực quan.
Tóm tắt
Tiêu chí “2.4.12 Focus không bị ẩn (Tăng cường)” trong WCAG 2.2 nhằm mục đích đảm bảo rằng yếu tố được focus khi thao tác bằng bàn phím không bị che khuất một phần nào.
Điểm cần lưu ý khi triển khai
- Sử dụng thuộc tính scroll-padding trong CSS để điều chỉnh vị trí cuộn.
- Điều chỉnh vị trí focus một cách động bằng JavaScript.
- Áp dụng thiết kế sao cho popup hoặc nội dung cố định không che khuất focus.
Đ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.