Skip to main content Skip to docs navigation
View on GitHub

Visually hidden视觉隐藏

Use these helpers to visually hide elements but keep them accessible to assistive technologies.使用这些辅助工具可以直观地隐藏元素，但可以让辅助技术访问这些元素。

Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .visually-hidden. 使用.visually-hidden，视觉上隐藏元素，同时仍允许它暴露于辅助技术（如屏幕阅读器）中。Use .visually-hidden-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). 使用.visually-hidden-focusable可在默认情况下在视觉上隐藏元素，但在聚焦时显示它（例如，仅由键盘用户）。.visually-hidden-focusable can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus..visually-hidden-focusable也可应用于容器，幸亏了:focus-within，当容器的任何子元素接收到焦点时，将显示容器。

Skip to main content
A container with a focusable element.
<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>

Both visually-hidden and visually-hidden-focusable can also be used as mixins.visually-hidden和visually-hidden-focusable也可以用作杂合体。

// Usage as a mixin

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