Skip to main content Skip to docs navigation
View on GitHub

视觉隐藏

通过这里提供的工具类可以在视觉上隐藏 HTML 元素,但通过辅助技术可以访问到这些元素。

通过 .visually-hidden 类在视觉上隐藏某个元素的同时,仍然能够被辅助技术(例如屏幕阅读器)识别。通过 .visually-hidden-focusable 类可以在视觉上隐藏某个元素,但是在获得焦点时能够显示该元素(例如,只使用键盘的用户)。也可以将 .visually-hidden-focusable 类应用到包含其他元素的容器元素上,幸亏有 :focus-within,当容器元素 中的任何子元素获得焦点时,该容器元素将被显示出来。

Title for screen readers

Skip to main content
这是一个容器元素,包含可获得焦点的元素。
<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-hiddenvisually-hidden-focusable 都可以作为 mixin 使用。

// 作为 mixin 使用

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

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