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-focusablecũ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.

html

<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-hiddenvà visually-hidden-focusablecũ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;
}

Trực quan ẩn

Tiêu đề cho trình đọc màn hình