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