بصريا مخفية

إخفاء عنصر بصريًا مع السماح له بالتعرض للتقنيات المساعدة (مثل برامج قراءة الشاشة) باستخدام .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استخدامه أيضًا كخلطات.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

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