Việc triển khai thứ tự thẻ hợp lý là một phần quan trọng để cung cấp cho người dùng trải nghiệm thao tác mượt mà trên bàn phím. Trình đọc màn hình và các công nghệ hỗ trợ khác sẽ di chuyển trên trang theo thứ tự DOM. Luồng thông tin phải hợp lý.
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. 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.
Có hai ý chính cần ghi 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 thanh điều hướng không?
Hãy chú ý 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ú ý mọi thao tác nhảy ngoài màn hình, khi thao tác tab đưa bạn đến nội dung không nên xuất hiện.
Tìm hiểu thêm trong Kiến thức cơ bản về truy cập bàn phím.
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 đã sử dụng CSS để định vị lại các phần tử hình ảnh, người dùng công nghệ hỗ trợ sẽ gặp phải các 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ày về vị trí trước đó trong DOM.
Nếu các chế độ điều khiển bằng bàn phím vẫn cho phép truy cập vào nội dung ngoài màn hình, hãy cân nhắc xoá nội dung này bằng tabindex="-1".
Tìm hiểu thêm trong phần Kiểm soát tiêu điểm bằng chỉ mục thẻ.
Tài nguyên
Mã nguồn cho Thứ tự hình ảnh trên trang sau kiểm tra thứ tự DOM