视觉隐藏（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;
        }