מוסתר ויזואלית

הסתרה ויזואלית של אלמנט ועדיין לאפשר לו להיחשף לטכנולוגיות מסייעות (כגון קוראי מסך) עם .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;
}