Focus Indicator
Hiển thị trực quan cho biết phần tử nào đang có focus bàn phím. Thường được hiển thị dưới dạng đường viền hoặc vùng sáng.
Focus indicator là một dấu hiệu trực quan cho biết phần tử UI nào đang có focus bàn phím. Thường được hiển thị dưới dạng đường viền (border) hoặc vùng sáng (thay đổi màu nền), nó xuất hiện trên các phần tử tương tác như liên kết, nút và trường nhập liệu. Đối với người dùng điều hướng trang web chỉ bằng bàn phím, focus indicator là hướng dẫn không thể thiếu để theo dõi vị trí hiện tại trên trang.
WCAG (Web Content Accessibility Guidelines) 2.2 đã tăng cường đáng kể yêu cầu focus indicator. Tiêu chí thành công 2.4.7 (Cấp AA) yêu cầu focus phải nhận biết được bằng mắt, trong khi 2.4.11 (Cấp AA) bắt buộc diện tích tối thiểu ít nhất đường viền 2px hoặc thay đổi trực quan tương đương. Hơn nữa, 2.4.12 (Cấp AAA) khuyến nghị tỷ lệ tương phản focus indicator ít nhất 3:1. Hướng dẫn CSS về khả năng truy cập bao gồm các kỹ thuật triển khai.
Pseudo-class CSS :focus-visible đóng vai trò quan trọng trong việc triển khai focus indicator. Pseudo-class truyền thống :focus hiển thị vòng focus ngay cả khi nhấp chuột, khiến nhiều nhà thiết kế vô hiệu hóa chúng bằng outline: none. Với :focus-visible, focus indicator chỉ xuất hiện khi điều hướng bằng bàn phím và ẩn khi nhấp chuột, đạt được sự cân bằng giữa thẩm mỹ và khả năng truy cập.
Một sai lầm phổ biến là loại bỏ hoàn toàn focus indicator bằng outline: none hoặc outline: 0. Điều này làm suy giảm nghiêm trọng khả năng truy cập cho người dùng bàn phím và vi phạm WCAG. Nếu kiểu mặc định của trình duyệt không mong muốn, giải pháp không phải là loại bỏ mà là áp dụng kiểu focus tùy chỉnh phù hợp với thiết kế trang web. Ví dụ, :focus-visible { outline: 3px solid #4A90D9; outline-offset: 2px; } cung cấp kiểu có độ hiển thị cao.
Khi thiết kế focus indicator, đảm bảo đủ độ tương phản trong cả chế độ tối và sáng cũng quan trọng. Vòng focus có thể trở nên vô hình khi màu nền thay đổi, vì vậy sử dụng box-shadow cùng với outline để tạo chỉ báo kép là kỹ thuật hiệu quả. Đối với component tùy chỉnh như menu dropdown và hộp thoại modal, quản lý focus phải được triển khai đúng trong JavaScript, bao gồm focus trapping và focus restoration. Hướng dẫn thực hành thiết kế UI cung cấp thêm hiểu biết.
Liên quan đến đếm ký tự, focus indicator đặc biệt quan trọng cho các trường nhập văn bản. Trong giao diện có nhiều vùng nhập liệu, như công cụ đếm ký tự, việc hiển thị rõ ràng trường nào người dùng đang nhập giúp ngăn ngừa lỗi và hỗ trợ nhập văn bản hiệu quả. Thiết lập focus indicator nổi bật trên các trường nhập liệu đang hoạt động trực tiếp cải thiện khả năng sử dụng.