HTMLBốn nhóm, khác nhau ở chỗ ai còn thấy nội dung:
| Cách | Mắt | Screen reader | Focus được |
|---|---|---|---|
display: none / hidden | Ẩn | Ẩn | Không |
visibility: hidden | Ẩn | Ẩn | Không |
aria-hidden="true" | Thấy | Ẩn | Vẫn được |
class sr-only (clip 1px) | Ẩn | Đọc được | Được |
css
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}Dùng sr-only khi thông tin chỉ cần cho người không nhìn thấy giao diện: nhãn của ô tìm kiếm chỉ có icon kính lúp, chữ "(mở tab mới)" sau link, tiêu đề của một vùng <section>.
Bẫy kinh điển — custom checkbox/switch: nhiều người ẩn input gốc bằng display: none rồi style cái <span> bên cạnh. Làm vậy là gỡ input khỏi tab order và khỏi accessibility tree — không tab tới được, không có trạng thái checked. Cách đúng: giữ input trong luồng bằng .sr-only (hoặc opacity: 0 + phủ lên vùng bấm), rồi vẽ hình bằng :checked + span, và giữ được focus ring khi input nhận focus:
css
.toggle:focus-visible + .track { outline: 2px solid currentColor; outline-offset: 2px; }Đừng dùng width: 0; height: 0 — vài trình duyệt coi như không hiển thị và bỏ khỏi tab order.