Visually Hidden ^commun

L'objectif est de masquer visuellement des éléments tout en les gardant accesssibles aux technologies d'assistance.
Il suffit d'ajouter la classe .visually-hidden.

Il est également possible de masquer visuellement un élément sauf lorsqu'il est focus en ajoutant la classe .visually-hidden-focusable.
Dans l'exemple ci-dessous, on ne voit rien (normal :)) mais il suffit de tabuler pour voir 2 items "focusables".

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

Il est possible de les utiliser comme mixins.

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

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