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 trong việc 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ử theo cách 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 theo thứ tự đọc, di chuyển từ trái sang phải, từ đầu đến cuối trang.
Tìm hiểu thêm trong bài viết Nguyên tắc cơ bản về quyền truy cập 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 tất cả các điều khiển tương tác trên trang,
giải pháp đầu tiên là thay thế các thành phần điều khiển tuỳ chỉnh bằng các phương án thay thế HTML đã 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 có thể cải thiện đáng kể khả năng truy cập trang web của bạn,
và giúp giảm đáng kể khối lượng công việc.
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 bài viết Kiểm soát tiêu điểm bằng chỉ mục thẻ.