Các trạng thái trọng tâm có thể truy cập: Thiết kế tiêu điểm bàn phím hiển thị

Tại sao trạng thái tập trung lại quan trọng

Những người sử dụng bàn phím, chuyển đổi thiết bị hoặc kính lúp màn hình sẽ di chuyển qua từng phần tử của trang một. Chỉ báo tiêu điểm là cách duy nhất để họ biết mình đang ở đâu. Xóa phác thảo trình duyệt mà không thay thế là một trong những lỗi trợ năng phổ biến nhất.

WCAG 2.2 yêu cầu những gì

Tiêu chí thành công 2.4.7 Có thể nhìn thấy tiêu điểm (cấp AA) yêu cầu mọi giao diện có thể thao tác bằng bàn phím đều phải có chế độ hiển thị chỉ báo tiêu điểm. WCAG 2.2 đã thêm 2.4.13 Giao diện lấy nét (cấp AAA), mô tả chỉ báo mạnh: ít nhất phải lớn bằng diện tích của chu vi dày 2 pixel CSS của thành phần, với tỷ lệ tương phản ít nhất là 3:1 giữa trạng thái được lấy nét và không lấy nét.

: có thể nhìn thấy tiêu điểm

MDN giải thích rằng :focus-visible áp dụng khi một phần tử có tiêu điểm và trình duyệt quyết định, bằng cách sử dụng chẩn đoán, tiêu điểm đó sẽ được hiển thị, thường là khi sử dụng bàn phím. Điều đó cho phép bạn hiển thị các vòng lấy nét mạnh cho người dùng bàn phím mà không hiển thị chúng mỗi khi ai đó nhấp vào nút bằng chuột. Sử dụng nó thay vì loại bỏ các phác thảo.

Thiết kế chiếc nhẫn

Hướng dẫn thực hành:

• Sử dụng đường viền hoặc vòng có phần bù để nó không hòa vào phần tử.
• Kiểm tra độ tương phản trên mọi nền mà phần tử có thể xuất hiện trên đó; một chiếc nhẫn hai màu sẽ giúp ích.
• Giữ nó nhất quán giữa các thành phần, được xác định như một mã thông báo trong hệ thống thiết kế của bạn.
• Đừng bao giờ chỉ dựa vào sự thay đổi màu sắc tinh tế.
• Đảm bảo phần tử tập trung không bị ẩn đằng sau các tiêu đề cố định.

Tập trung và chuyển động

Vòng lấy nét có thể xuất hiện khi chuyển tiếp rất ngắn nhưng sẽ có cảm giác ngay lập tức. Tránh các hoạt ảnh làm trì hoãn vòng đổ chuông hoặc di chuyển phần tử và đối với các thành phần được vẽ bằng canvas tùy chỉnh, hãy đảm bảo vẫn có một phần tử thực sự có thể lấy tiêu điểm trong trang để người dùng bàn phím có thể tiếp cận nó.