Danh sách kiểm tra khả năng tiếp cận bàn phím cho website: Cách kiểm tra thứ tự focus, độ hiển thị, bẫy phím, phím tắt và liên kết bỏ qua

Điều hướng bằng bàn phím là nền tảng của thiết kế giao diện mà người dùng có th��� sử dụng mà không cần chuột, màn hình cảm ứng hay điều khiển bằng giọng nói. Nhiều người chỉ dựa vào bàn phím, bao gồm người dùng trình đọc màn hình, người khuyết tật vận động và người dùng thành thạo muốn tránh chuyển đổi thiết bị đầu vào. Nếu thứ tự focus gây rối, chỉ báo focus không nhìn thấy hoặc người dùng bị mắc kẹt trong một widget, giao diện sẽ trở nên không thể sử dụng dù trông chỉn chu. Danh sách kiểm tra khả năng tiếp cận bàn phím cho website giúp bạn kiểm tra có hệ thống thay vì bấm Tab ngẫu nhiên và hy vọng mọi thứ ổn.

Hướng dẫn này cung cấp danh sách kiểm tra thực tế, từng bước mà bạn có thể chạy trên bất kỳ trang nào chỉ bằng bàn phím. Bạn không cần công nghệ hỗ trợ để bắt đầu, chỉ cần bàn phím tiêu chuẩn và trình duyệt. Mục tiêu là xác minh năm lĩnh vực cốt lõi: liên kết bỏ qua, độ hiển thị của focus, thứ tự focus, bẫy phím và phím tắt.

Cách chuẩn bị cho buổi kiểm tra

Trước khi bắt đầu bấm Tab, hãy thiết lập môi trường kiểm tra nhất quán để kết quả đáng tin cậy và có thể lặp lại. Các bước chuẩn bị nhỏ giúp tránh kết quả dương tính giả và dễ ghi lại vấn đề cho nhà phát triển.

• Dùng trình duyệt sạch: Kiểm tra trong cửa sổ ẩn danh mà không có tiện ích có thể thay đổi hành vi focus. Dùng trình duyệt máy tính tiêu chuẩn ở mức thu phóng 100%.
• Ngắt chuột: Hoặc chủ động tránh dùng chuột. Điều này buộc bạn trải nghiệm trang như người dùng chỉ dùng bàn phím.
• Nắm các phím cơ bản: Dùng Tab để di chuyển tới, Shift + Tab để lùi lại, Enter và Space để kích hoạt nút và liên kết, Escape để đóng hộp thoại, và phím mũi tên để điều hướng trong menu, tab và nhóm radio.
• Chọn các mẫu chính: Kiểm tra trang chủ, một trang nội dung, một biểu mẫu, trang kết quả tìm kiếm và bất kỳ trang nào có widget tùy chỉnh như modal hoặc carousel.

Bước 1: Kiểm tra liên kết bỏ qua

Liên kết bỏ qua cho phép người dùng bàn phím bỏ qua điều hướng lặp lại và nhảy thẳng đến nội dung chính. Không có chúng, người dùng phải Tab qua từng liên kết ở header trên mỗi lần tải trang.

• Bấm Tab khi trang tải: Phần tử có thể focus đầu tiên nên là liên kết bỏ qua, thường có nhãn “Bỏ qua đến nội dung chính” hoặc “Bỏ qua đến nội dung”. Nó có thể bị ẩn trực quan cho đến khi được focus, điều này chấp nhận được.
• Kiểm tra độ hiển thị khi focus: Khi liên kết bỏ qua nhận focus, nó phải hiện rõ trên màn hình với độ tương phản đủ và không bị header dính che khuất.
• Kích hoạt liên kết: Bấm Enter. Focus nên di chuyển đến vùng chứa nội dung chính, và lần Tab tiếp theo phải bắt đầu từ vị trí đó, không quay lại đầu trang.
• Kiểm tra trên mọi mẫu: Xác nhận liên kết bỏ qua tồn tại trên mọi mẫu trang và ID đích của nó khớp với landmark nội dung chính.

Ghi lại điều gì

Ghi chú nếu liên kết bỏ qua bị thiếu, không hiển thị khi focus, không thao tác được bằng bàn phím, hoặc focus không di chuyển như mong đợi sau khi kích hoạt. Đây là những lỗi ưu tiên cao.

Bước 2: Kiểm tra độ hiển thị của focus

Nếu người dùng không thấy mình đang ở đâu, họ không thể điều hướng. Mọi phần tử tương tác có thể nhận focus phải có chỉ báo focus nhìn thấy đáp ứng yêu cầu tương phản.

• Tab qua toàn trang: Di chuyển chậm từ trên xuống dưới. Với mỗi liên kết, nút, trường biểu mẫu và widget tùy chỉnh, xác nhận xuất hiện đường viền hoặc thay đổi nền rõ ràng.
• Không dựa vào màu sắc alone: Kiểu focus nên hơn một chút thay đổi màu tinh tế. Tìm đường viền, border hoặc gạch chân đặc, vẫn hiển thị trên nền.
• Kiểm tra focus kéo dài: Chỉ báo nên hiển thị chừng nào phần tử còn được focus và không biến mất sau một giây hoặc bị cắt bởi container có overflow.
• Kiểm tra các trạng thái khác nhau: Xác minh độ hiển thị của focus khi hover, sau khi kích hoạt và trên các phần tử xuất hiện động, như menu thả xuống và widget disclosure.

Tránh xóa outline bằng CSS mà không cung cấp phương án mạnh hơn. Kiểu mặc định của trình duyệt tốt hơn không có chỉ báo nào.

Bước 3: Xác minh thứ tự focus hợp lý

Thứ tự focus nên theo thứ tự trực quan và đọc của trang, thường từ trên xuống dưới và từ trái sang phải. Thứ tự gây rối buộc người dùng đoán họ sẽ đến đâu tiếp theo.

• Theo dòng trực quan: Khi bạn bấm Tab, focus nên di chuyển dự đoán qua header, điều hướng chính, nội dung chính và footer mà không nhảy ngẫu nhiên sang sidebar hoặc phần tử ẩn.
• Chú ý tabindex dương: Phần tử có tabindex lớn hơn 0 có thể phá vỡ thứ tự tự nhiên. Trong hầu hết các trường hợp, thứ tự focus nên do thứ tự DOM quyết định, dùng tabindex 0 chỉ khi cần và tabindex -1 để quản lý focus bằng chương trình.
• Kiểm tra modal và overlay: Khi hộp thoại mở, focus nên di chuyển vào trong ngay, thường đến phần tử có thể focus đầu tiên hoặc tiêu đề hộp thoại. Nội dung nền nên inert.
• Kiểm tra nội dung động: Với accordion, tab và menu có thể mở rộng, đảm bảo focus không bỏ qua nội dung vừa hiển thị hoặc rơi vào phần tử ẩn hiện không hiển thị.

Kiểm tra nhanh vấn đề thứ tự

Đôi mắt lại ngắn sau mỗi lần bấm Tab và dự đoán focus sẽ đi đâu tiếp theo dựa trên những gì bạn thấy. Nếu bạn thường sai, thứ tự có lẽ cần điều chỉnh.

Bước 4: Phát hiện bẫy phím

Bẫy phím xảy ra khi người dùng có thể Tab vào một thành phần nhưng không thể Tab ra chỉ bằng bàn phím. Đây là rào cản nghiêm trọng có thể ngăn người dùng hoàn thành tác vụ.

• Tab vào mọi widget:特别 chú ý đến bản đồ nhúng, trình soạn thảo văn bản phong phú, bộ chọn ngày, carousel và dropdown tùy chỉnh. Vào từng cái và thử rời đi bằng Tab và Shift + Tab.
• Kiểm tra Escape và lối thoát khác: Với modal, focus nên bị mắc bên trong khi mở, nhưng người dùng phải có thể đóng modal bằng Escape hoặc nút đóng có thể truy cập và trả focus về phần tử đã mở nó.
• Kiểm tra vòng lặp vô hạn: Đảm bảo Tab không lặp vô hạn trong một widget khi nội dung trang khác cần được truy cập.
• Xác minh không có bẫy ẩn: Đôi khi focus di chuyển đến phần tử ngoài màn hình hoặc phần tử có opacity bằng không. Nếu bạn bấm Tab và không thấy focus hiển thị, focus có thể bị mất trong nội dung ẩn.

Mọi bẫy ngăn điều hướng tới và lùi mà không có chuột là lỗi cần sửa ngay.

Bước 5: Đánh giá phím tắt và tương tác tùy chỉnh

Phím tắt và hành vi widget tùy chỉnh có thể cải thiện hiệu quả, nhưng cũng có thể xung đột với lệnh của trình duyệt và trình đọc màn hình nếu không được triển khai cẩn thận.

• Xác nhận mọi chức năng thao tác được bằng bàn phím: Mọi hành động có bằng chuột, như mở menu, chọn ngày hoặc kéo thanh trượt, nên có phương án bàn phím bằng phím tiêu chuẩn.
• Kiểm tra mẫu phím mong đợi: Với tab, phím mũi tên nên di chuyển giữa các tab và Tab nên chuyển đến tab panel. Với nhóm radio, phím mũi tên nên đổi lựa chọn. Với menu, phím mũi tên và Escape nên hoạt động như người dùng mong đợi.
• Kiểm tra xung đột phím tắt: Phím tắt một phím kích hoạt không có phím modifier có thể can thiệp vào việc gõ và điều hướng trình đọc màn hình. Nếu có phím tắt, đảm bảo chúng có thể tắt hoặc gán lại và không kích hoạt khi focus nằm trong trường văn bản.
• Rà soát quản lý focus sau khi kích hoạt: Sau khi gửi biểu mẫu, xóa mục hoặc đóng widget, focus nên rơi vào vị trí hợp lý, dự đoán được, như thông báo xác nhận hoặc mục tiếp theo trong danh sách, không reset về đầu trang.

Cách ghi lại và ưu tiên phát hiện

Danh sách kiểm tra chỉ hữu ích nếu phát hiện dẫn đến sửa đổi. Ghi lại từng vấn đề với đủ ngữ cảnh để nhà phát triển tái tạo mà không phải đoán.

• Ghi lại đường dẫn: Ghi URL, trình duyệt và chuỗi phím chính xác đã bấm để gặp vấn đề.

Mô tả hành vi mong đợi so với thực tế: Ví dụ, mong đợi focus di chuyển từ điều hướng đến tiêu đề chính, nhưng thực tế focus nhảy đến footer.

• Ưu tiên theo tác động: Xếp bẫy phím và liên kết bỏ qua thiếu là nghiêm trọng, focus không nhìn thấy và thứ tự phi logic là ưu tiên cao, và mâu thuẫn phím tắt nhỏ là ưu tiên trung bình.
• Đưa ra khuyến nghị: Gợi ý giữ thứ tự DOM khớp với thứ tự trực quan, đảm bảo kiểu focus hiển thị, quản lý focus bằng chương trình cho hộp thoại và dùng phần tử button và link gốc thay vì div với click handler.

Kiểm tra lại sau khi sửa bằng cùng danh sách kiểm tra. Kiểm tra lại nhất quán xác nhận một sửa đổi không tạo ra vấn đề focus mới ở nơi khác trên trang.

Xây dựng thói quen, không phải kiểm tra một lần

Kiểm tra điều hướng bàn phím hiệu quả nhất khi là một phần của đánh giá thiết kế và phát triển thường xuyên, không chỉ kiểm tra cuối trước khi ra mắt. Chạy danh sách kiểm tra khả năng tiếp cận bàn phím cho website trên các thành phần, mẫu và embed bên thứ ba mới giúp bắt vấn đề sớm khi dễ sửa hơn. Theo thời gian, đội ngũ sẽ bắt đầu thiết kế với thứ tự focus, độ hiển thị và tương tác dự đoán được, mang lại lợi ích cho mọi người dùng dựa vào giao diện rõ ràng và hiệu quả.