Đảm bảo rằng trình đọc màn hình và các công nghệ hỗ trợ khác chỉ hiển thị những phần có liên quan trên trang. Ví dụ: nội dung nằm ngoài màn hình phải được ẩn khỏi các công nghệ hỗ trợ.
Cách kiểm thử thủ công
Để kiểm tra xem nội dung ngoài màn hình có bị ẩn hay không, bạn nên kiểm thử bằng trình đọc màn hình.
- Đối với người dùng máy Mac, hãy xem video này về cách sử dụng VoiceOver.
- Đối với người dùng máy tính, hãy xem video này về cách sử dụng NVDA.
- Đối với người dùng Chromebook, hãy tham khảo ChromeVox – trình đọc màn hình tích hợp sẵn.
Sử dụng phím TAB để di chuyển qua trang. Trình đọc màn hình không được thông báo nội dung bị ẩn.
Cách khắc phục
Để ẩn nội dung ngoài màn hình, hãy xoá phần tử chứa nội dung đó khỏi thứ tự thẻ bằng cách đặt thành display: none hoặc visibility: hidden.
Ví dụ:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
Xem thêm phần Đặt chính xác chế độ hiển thị của nội dung ngoài màn hình.
Tài nguyên
Mã nguồn cho quy trình kiểm tra Nội dung ngoài màn hình bị ẩn khỏi công nghệ hỗ trợ