Thứ tự thẻ hợp lý là yếu tố quan trọng để người dùng có trải nghiệm bàn phím mượt mà. Trình đọc màn hình và các công nghệ hỗ trợ khác điều hướng trang theo thứ tự DOM. Luồng thông tin phải hợp lý.
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. Nhìn chung, tiêu điểm phải tuân theo thứ tự đọc, từ trên xuống dưới trang. Ở hầu hết các ngôn ngữ, thứ tự đọc sẽ di chuyển từ trái sang phải. Trong một số ngôn ngữ, chẳng hạn như tiếng Ả Rập và tiếng Do Thái, thứ tự đọc sẽ di chuyển từ phải sang trái.
Bạn cần ghi nhớ hai ý tưởng chính khi đánh giá thứ tự thẻ:
- Các phần tử trong DOM có được sắp xếp theo thứ tự hợp lý không?
- Nội dung ngoài màn hình có được ẩn chính xác khỏi phần điều hướng không?
Chú ý đến bất kỳ bước nhảy nào trong thanh điều hướng có vẻ gây khó chịu. Ngoài ra, hãy chú ý đến mọi thao tác nhảy ngoài màn hình, khi thao tác nhấn phím tab sẽ đưa bạn đến nội dung không cố ý hiển thị.
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.
Cách khắc phục
Nếu thứ tự tiêu điểm có vẻ không chính xác, hãy sắp xếp lại các phần tử trong DOM để làm cho thứ tự thẻ tự nhiên hơn.
Tránh sử dụng CSS để đặt lại vị trí các phần tử trực quan, vì người dùng công nghệ hỗ trợ sẽ thấy một thao tác điều hướng vô nghĩa. Thay vì sử dụng CSS, hãy di chuyển phần tử đến vị trí trước đó trong DOM.
Nếu các chế độ điều khiển bằng bàn phím vẫn có thể truy cập vào nội dung ngoài màn hình, hãy cân nhắc việc xoá nội dung đó bằng tabindex="-1".
Tìm hiểu thêm trong phần Kiểm soát tiêu điểm bằng tabindex.
Tài nguyên
Mã nguồn cho Thứ tự hình ảnh trên trang tuân theo quá trình kiểm tra thứ tự DOM