视觉隐藏

通过 .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 href="#">可获得焦点的元素。</a></div>

visually-hidden 和 visually-hidden-focusable 都可以作为 mixin 使用。

// 作为 mixin 使用

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

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