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

視覺上隱藏

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

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

屏幕閱讀器的標題

跳到主要內容
具有 可聚焦元素的容器。
<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-hiddenvisually-hidden-focusable也可以用作 mixins。

// Usage as a mixin

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

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