Masquez visuellement un élément tout en lui permettant d'être exposé aux technologies d'assistance (telles que les lecteurs d'écran) avec .visually-hidden. Utiliser .visually-hidden-focusable pour masquer visuellement un élément par défaut, mais pour l'afficher lorsqu'il est ciblé (par exemple par un utilisateur au clavier uniquement). .visually-hidden-focusable peut également être appliqué à un conteneur - grâce à :focus-within, le conteneur sera affiché lorsqu'un élément enfant du conteneur reçoit le focus.

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

Les deux visually-hidden et visually-hidden-focusable peuvent également être utilisés comme mixins.

// Usage as a mixin

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

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