Skip to main content Skip to docs navigation
View on GitHub

视觉隐藏（Visually hidden）

使用这些辅助工具可在视觉上隐藏元素，但仍可通过辅助技术访问这些元素。

使用 .visually-hidden，在视觉上隐藏元素的同时，仍可将其显示给辅助技术（如屏幕阅读器）。使用 .visually-hidden-focusable，默认情况下可视化隐藏元素，但当它被聚焦时（例如被只使用键盘的用户聚焦时）就会显示出来.visually-hidden-focusable 也可以应用于容器–由于使用了:focus-within，当容器的任何子元素被聚焦时，容器都会显示。

Skip to main content
A container with a focusable element.
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 中。

//  mixin 中的用法

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

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