in English
Trực quan ẩn
Sử dụng các trình trợ giúp này để ẩn các phần tử một cách trực quan nhưng vẫn giữ cho chúng có thể tiếp cận được với các công nghệ hỗ trợ.
Ẩn một phần tử một cách trực quan trong khi vẫn cho phép phần tử đó tiếp xúc với các công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình) với .visually-hidden
. Sử dụng .visually-hidden-focusable
để ẩn trực quan một phần tử theo mặc định, nhưng để hiển thị nó khi nó được lấy tiêu điểm (ví dụ: bởi người dùng chỉ dùng bàn phím). .visually-hidden-focusable
cũng có thể được áp dụng cho vùng chứa – nhờ đó :focus-within
, vùng chứa sẽ được hiển thị khi bất kỳ phần tử con nào của vùng chứa nhận được tiêu điểm.
Tiêu đề cho trình đọc màn hình
Chuyển đến nội dung chính
Vùng chứa có
phần tử có thể lấy tiêu điểm .
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
Cả hai visually-hidden
và visually-hidden-focusable
cũng có thể được sử dụng làm mixin.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}