跳到主要內容 跳到文檔導航
Check
in English

視覺上隱藏

使用這些助手可以在視覺上隱藏元素，但讓輔助技術可以訪問它們。

在視覺上隱藏一個元素，同時仍然允許它使用.visually-hidden. 默認情況下用於.visually-hidden-focusable在視覺上隱藏一個元素，但在它獲得焦點時顯示它（例如，由僅使用鍵盤的用戶）。.visually-hidden-focusable也可以應用於容器——感謝:focus-within，當容器的任何子元素獲得焦點時，將顯示容器。

跳到主要內容
具有 可聚焦元素的容器。
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>

兩者visually-hidden和visually-hidden-focusable也可以用作 mixins。

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}