Nhiều người dùng khác nhau dựa vào bàn phím để điều hướng ứng dụng, từ người dùng bị suy giảm vận động tạm thời và vĩnh viễn đến người dùng sử dụng phím tắt để làm việc hiệu quả và năng suất hơn. Thứ tự thẻ hợp lý là một phần quan trọng để mang lại trải nghiệm điều hướng bằng bàn phím mượt mà.
Cách kiểm thử thủ công
Để kiểm tra xem thứ tự thẻ của ứng dụng có hợp lý hay không, hãy thử nhấn phím tab trên trang. Thứ tự các phần tử được lấy tiêu điểm phải tuân theo thứ tự DOM. Nhìn chung, tiêu điểm phải tuân theo thứ tự đọc, di chuyển từ trái sang phải, từ trên xuống dưới trang.
Tìm hiểu thêm trong phần Kiến thức cơ bản về tính năng hỗ trợ tiếp cận bằng bàn phím.
Bạn có thể truy cập vào tất cả các chế độ điều khiển tương tác trên trang không?
Nếu không, bạn có thể cần sử dụng tabindex để cải thiện khả năng lấy tiêu điểm của các chế độ điều khiển đó.
Quy tắc chung là mọi thành phần điều khiển mà người dùng có thể tương tác hoặc cung cấp dữ liệu đầu vào đều phải có thể lấy tiêu điểm và hiển thị chỉ báo tiêu điểm.
Nếu người dùng bàn phím không thể thấy tiêu điểm, thì họ sẽ không thể tương tác với trang.
Cách khắc phục
Nếu thứ tự tiêu điểm có vẻ không chính xác, bạn nên sắp xếp lại các phần tử trong DOM để thứ tự thẻ trở nên tự nhiên hơn.
Nếu bạn không thể truy cập vào tất cả các chế độ điều khiển tương tác trên trang, thì biện pháp khắc phục đầu tiên là thay thế các chế độ điều khiển tuỳ chỉnh bằng các chế độ thay thế HTML được chuẩn hoá.
Ví dụ: thay thế <div> hoạt động như một nút bằng <button>.
Việc sử dụng các phần tử HTML tích hợp sẵn có thể cải thiện đáng kể khả năng hỗ trợ tiếp cận của trang web và giảm đáng kể khối lượng công việc của bạn.
Nếu bạn đang tạo các thành phần tương tác tuỳ chỉnh không có HTML tương đương được chuẩn hoá, hãy sử dụng thuộc tính tabindex để đảm bảo rằng các thành phần đó có thể truy cập được bằng bàn phím.
Ví dụ:
<div tabindex="0">Focus me with the TAB key</div>
Tìm hiểu thêm trong phần Kiểm soát tiêu điểm bằng tabindex.