Nhiều người dùng dựa vào bàn phím để thao tác trên các ứng dụng, từ những người dùng bị suy giảm chức năng vận động tạm thời và vĩnh viễn cho đến những người dùng sử dụng phím tắt để tăng hiệu quả và làm việc hiệu quả hơn. Thứ tự thẻ hợp lý là một phần quan trọng để mang lại trải nghiệm thao tác mượt mà trên bàn phí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ử di chuyển qua các thẻ trên trang của bạn. Thứ tự các phần tử được làm tâm điểm cần 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 trang xuống cuối trang.
Tìm hiểu thêm trong Kiến thức cơ bản về truy cập bàn phím.
Bạn có thể truy cập tất cả các nút điều khiển tương tác trên trang không?
Nếu không, bạn có thể cần phải 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 đó.
Nguyên tắc chung là mọi chế độ điều khiển mà người dùng có thể tương tác hoặc cung cấp đầu vào đều phải có thể lấy tiêu điểm và hiển thị chỉ báo lấy nét.
Nếu người dùng bàn phím không thể nhìn thấy nội dung được đặt tiêu điểm, họ không có cách nào để tương tác với trang.
Cách khắc phục
Nếu thứ tự tâm đ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 để làm cho thứ tự thẻ 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, cách khắc phục đầu tiên là thay thế các chế độ điều khiển tuỳ chỉnh bằng các lựa chọ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 tiếp cận trang web của bạn và giảm đáng kể khối lượng công việc.
Nếu bạn đang xây dựng 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 chỉ mục thẻ.