Skip to main content Skip to docs navigation
在GitHub查看

视觉上隐藏

使用这些助手在视觉上隐藏元素，但让辅助技术可以访问它们。

使用.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-hidden和都visually-hidden-focusable可以用作混入。

// Usage as a mixin

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

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