Passer au contenu principal Passer à la navigation dans les documents
Check
in English

Visuellement caché

Utilisez ces aides pour masquer visuellement des éléments tout en les gardant accessibles aux technologies d'assistance.

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. Utilisez .visually-hidden-focusablepour 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-focusablepeut également être appliqué à un conteneur - grâce à :focus-within, le conteneur sera affiché lorsqu'un élément enfant du conteneur reçoit le focus.

Passer au contenu principal
Un conteneur avec un élément focalisable .
html 
<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-hiddenet visually-hidden-focusablepeuvent également être utilisés comme mixins.

// Usage as a mixin

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

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