视觉隐藏

使用这些帮助程序直观地隐藏元素，但使辅助技术可以访问这些元素。

直观地隐藏元素，同时仍允许它使用.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;
}