视觉隐藏（Visually hidden）

使用这些工具可以在视觉上隐藏元素，但元素仍可以被辅助技术使用。

On this page

可在视觉上隐藏元素，但仍允许其透过.visually-hidden呈现给辅助技术（例如屏幕阅读器）。在预设的情况下，使用.visually-hidden-focusable可以在视觉上隐藏元素，但是当元素被聚焦时（例如，使用键盘的用户）可以显示该元素。也可以用作mixin。

<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;
}