in English
视觉上隐藏
使用这些助手可以在视觉上隐藏元素,但让辅助技术可以访问它们。
在视觉上隐藏一个元素,同时仍然允许它使用.visually-hidden
. 默认情况下用于.visually-hidden-focusable
在视觉上隐藏一个元素,但在它获得焦点时显示它(例如,由仅使用键盘的用户)。.visually-hidden-focusable
也可以应用于容器——感谢:focus-within
,当容器的任何子元素获得焦点时,将显示容器。
<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
也可以用作 mixins。
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}