视觉上隐藏

使用这些帮助器可视地隐藏元素，但仍可让辅助技术访问这些元素。

使用 .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 也可以用作混合。

// Usage as a mixin

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

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

视觉上隐藏

屏幕阅读器标题