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