Trong tiêu chuẩn khả năng tiếp cận web “WCAG”, cần đặc biệt chú ý đến “focus” để người dùng có thể dễ dàng thao tác với nội dung web. “Focus” là trạng thái khi một yếu tố trên trang web được chọn (hoặc được kích hoạt) bằng bàn phím hoặc các công cụ hỗ trợ khác, và trạng thái này cần được hiển thị một cách rõ ràng để người dùng dễ nhận biết.
Bài viết này sẽ giải thích về tiêu chuẩn của WCAG liên quan đến “khi tập trung” (focus) và các điểm chính cần lưu ý.
Tầm quan trọng của khả năng tiếp cận khi ở trạng thái tập trung (focus)
“Focus” đóng vai trò quan trọng giúp người dùng sử dụng bàn phím hoặc trình đọc màn hình có thể nhận biết đang tương tác với yếu tố nào trên trang web. Đặc biệt, việc chú ý đến “khi ở trạng thái tập trung” là điều cần thiết đối với các nhóm người dùng sau:
- Người dùng khiếm thị: Khi sử dụng trình đọc màn hình, trạng thái “focus” giúp họ nhận biết vị trí hiện tại trên trang web.
- Người dùng có hạn chế về chức năng vận động: Do chỉ thao tác bằng bàn phím, họ cần có khả năng nhận biết trực quan yếu tố nào đang được focus trên trang web.
- Người cao tuổi hoặc người mới sử dụng: Do khó khăn trong việc thao tác trực quan, hiển thị trạng thái focus giúp họ dễ dàng hiểu cách sử dụng hơn.
Tiêu chuẩn về “khi ở trạng thái tập trung” (focus) trong WCAG
Trong “WCAG”, yêu cầu trạng thái focus khi thao tác bằng bàn phím hoặc các công cụ khác phải được hiển thị một cách rõ ràng về mặt trực quan. Cụ thể, cần chú ý đến các điểm sau:
1. Độ rõ ràng của hiển thị trạng thái focus
Khi ở trạng thái focus, để làm rõ yếu tố nào đang được kích hoạt về mặt trực quan, nên áp dụng các biện pháp như thay đổi màu đường viền, đường viền đậm, hoặc thay đổi màu nền nhằm tăng khả năng nhận biết.
Ví dụ tốt
- Khi nút hoặc liên kết được focus, một đường viền màu xanh sẽ hiển thị
- Màu nền của yếu tố được focus thay đổi, làm cho nó nổi bật hơn
Ví dụ xấu
- Trạng thái focus khó nhận biết, không thể xác định rõ yếu tố nào đang được chọn về mặt trực quan
2. Khả năng truy cập khi thao tác bằng bàn phím
Khi sử dụng phím Tab trên bàn phím để di chuyển qua các trang web, điều quan trọng là các liên kết và nút phải được focus theo thứ tự. Trạng thái focus bị nhảy hoặc không thể di chuyển đến một số yếu tố sẽ làm giảm khả năng tiếp cận và cần được tránh.
3. Tính hợp lý của thứ tự focus
Việc di chuyển focus cần tuân theo thứ tự hợp lý. Thứ tự focus nên phù hợp với trình tự hiển thị trên màn hình và kỳ vọng của người dùng, giúp thao tác trở nên mượt mà và tránh gây nhầm lẫn.
Phương pháp triển khai cụ thể khi ở trạng thái focus
Các thay đổi trực quan khi ở trạng thái focus có thể được triển khai khá dễ dàng bằng HTML và CSS. Dưới đây là một ví dụ cơ bản
Ví dụ hiển thị focus bằng CSS
button:focus,
a:focus {
outline: 2px solid #007acc; /* Hiển thị focus trực quan bằng đường viền màu xanh */
background-color: #e0f7ff; /* Thay đổi màu nền để làm cho trạng thái dễ nhận biết hơn*/
}
Bằng cách chỉ định như vậy, khi nút hoặc liên kết được focus thông qua thao tác bàn phím, đường viền và màu nền sẽ thay đổi, giúp dễ dàng nhận biết trạng thái về mặt trực quan.
Những điểm cần lưu ý khi hiển thị trạng thái focus
Có một số điểm cần lưu ý khi hiển thị trạng thái focus. Nếu không xử lý đúng cách, khả năng nhìn thấy focus và tính dễ sử dụng sẽ bị giảm, dẫn đến không đáp ứng các tiêu chuẩn về khả năng tiếp cận.
-
Quan tâm đến khả năng nhận biết màu sắc Khi chỉ định màu cho trạng thái focus, hãy chọn những màu mà người có khiếm khuyết về nhận biết màu sắc cũng có thể dễ dàng nhìn thấy. Ví dụ, tránh kết hợp màu đỏ và xanh lá, hoặc sử dụng các màu có độ tương phản về độ sáng cao là những biện pháp hiệu quả.
-
Đảm bảo không làm xáo trộn hiển thị của nội dung Khi thay đổi đường viền hoặc màu nền trong trạng thái focus, có thể xảy ra tình trạng bố cục nội dung bị lệch. Hãy thiết kế cẩn thận để tránh làm xáo trộn bố cục.
-
Đảm bảo trạng thái focus không bị mất Cần thiết lập đúng cách cho tất cả các yếu tố tương tác để đảm bảo trạng thái focus không đột ngột biến mất hoặc không thể xác định được vị trí của nó.
Tóm tắt
Bằng cách tuân thủ các tiêu chuẩn về “khi ở trạng thái focus” mà “WCAG” yêu cầu trong khả năng tiếp cận web, tất cả người dùng, bao gồm những người sử dụng bàn phím hoặc công nghệ hỗ trợ, sẽ có thể truy cập và thao tác dễ dàng hơn với nội dung web.
Hiển thị trạng thái focus có thể được cải thiện bằng cách thiết lập đơn giản và rất hiệu quả trong việc nâng cao khả năng tiếp cận. Hãy triển khai hiển thị focus với sự quan tâm đến người dùng, hướng đến mục tiêu xây dựng một trang web dễ sử dụng cho tất cả mọi người.
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.