Aides

Visuellement masqué

Les classes .visually-hidden et .visually-hidden-focusable cachent un contenu à l’écran tout en le laissant lisible par les lecteurs d’écran. La seconde le révèle quand il reçoit le focus.

Utilisez ces classes pour ajouter une information utile aux utilisateurs de technologies d’assistance qui n’a pas de raison d’apparaître à l’écran : un libellé de bouton-icône, un complément de lien, un titre de tableau. Elles réduisent l’élément à un pixel et le rognent, mais ne le retirent pas de l’arbre d’accessibilité, contrairement à .d-none ou à l’attribut hidden.

Texte caché pour un bouton-icône#

Un bouton sans texte visible reste compréhensible : le libellé est lu par le lecteur d’écran.

<button type="button" class="btn btn-outline-primary">
  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2"/></svg>
  <span class="visually-hidden">Ajouter un bénéficiaire</span>
</button>

Précision pour un lien#

Des liens « Détails » répétés deviennent distincts pour un lecteur d’écran, sans changer l’affichage.

Compte courant : 480 000 FCFA Détails du compte courant
Livret A : 1 250 000 FCFA Détails du livret A

<ul class="list-unstyled mb-0">
  <li>Compte courant : 480 000 FCFA <a href="#">Détails<span class="visually-hidden"> du compte courant</span></a></li>
  <li>Livret A : 1 250 000 FCFA <a href="#">Détails<span class="visually-hidden"> du livret A</span></a></li>
</ul>

Titre de tableau masqué#

Une légende accessible, non affichée, décrit le tableau.

Mensualités du prêt immobilier
Échéance	Montant
5 avril	85 000 FCFA
5 mai	85 000 FCFA

<table class="table" style="max-width: 24rem">
  <caption class="visually-hidden">Mensualités du prêt immobilier</caption>
  <thead>
    <tr><th scope="col">Échéance</th><th scope="col" class="text-end">Montant</th></tr>
  </thead>
  <tbody>
    <tr><td>5 avril</td><td class="text-end">85 000 FCFA</td></tr>
    <tr><td>5 mai</td><td class="text-end">85 000 FCFA</td></tr>
  </tbody>
</table>

Lien d'évitement#

Avec .visually-hidden-focusable, le lien n’apparaît qu’au focus clavier. Tabulez depuis le début de cet exemple pour le faire apparaître.

Votre espace client

<div class="position-relative border p-3">
  <a class="visually-hidden-focusable" href="#contenu-principal-exemple">Aller au contenu principal</a>
  <nav aria-label="Navigation de l'exemple" class="mb-2"><a href="#" class="me-3">Comptes</a><a href="#" class="me-3">Cartes</a><a href="#">Prêts</a></nav>
  <div id="contenu-principal-exemple" tabindex="-1">Votre espace client</div>
</div>

Classes et mixins

Classes et mixins
Élément	Rôle
`.visually-hidden`	Cache visuellement, garde le contenu accessible : 1 px, rogné, sans bordure ni marge visible.
`.visually-hidden-focusable`	Cache le contenu tant que lui ou un de ses descendants n’a pas le focus.
`@include visually-hidden()`	Mixin Sass pour vos propres sélecteurs.
`@include visually-hidden-focusable()`	Mixin Sass pour le comportement « visible au focus ».

Bonnes pratiques

À faire

Donnez un libellé masqué à tout bouton ou lien dont le sens passe uniquement par une icône.
Utilisez .visually-hidden-focusable pour un lien d’évitement placé tout en haut de la page.
Gardez le texte masqué court et utile, dans la langue de la page.

À éviter

N’utilisez pas .d-none ni hidden pour du texte destiné aux lecteurs d’écran : il serait ignoré.
Ne cachez pas un contenu qui contient un élément focusable, sauf avec .visually-hidden-focusable : le focus se perdrait sur un élément invisible.
Ne dupliquez pas ce que le texte visible dit déjà.

Accessibilité

Un lien d’évitement doit être le premier élément focusable de la page et devenir visible au focus.
Une alternative à aria-label : .visually-hidden reste traduisible et sélectionnable par les outils de traduction.
Testez avec un lecteur d’écran : le texte masqué doit être lu au bon endroit, dans le bon ordre.