Đảm bảo rằng chỉ những phần liên quan của trang mới hiển thị với trình đọc màn hình và các công nghệ hỗ trợ khác. Ví dụ: nội dung nằm ngoài màn hình hoặc chỉ trình bày sẽ bị ẩn khỏi các công nghệ hỗ trợ.
Cách kiểm thử theo cách thủ công
Để kiểm tra xem nội dung ngoài màn hình có bị ẩn hay không, bạn cần kiểm tra nội dung đó theo cách thủ công 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 tìm hiểu về ChromeVox, trình đọc màn hình tích hợp sẵn.
Dùng phím TAB để di chuyển qua trang của bạn.
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 phần 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 bài viết Thiết lập 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 của nội dung Nội dung ngoài màn hình bị ẩn khỏi công nghệ hỗ trợ