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

// Usage as a mixin

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

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