CSS visually-hidden : masquer visuellement sans perdre l'accessibilité

Comment ajouter du contexte pour les lecteurs d'écran sans encombrer l'interface visuelle ? La technique visually-hidden (aussi appelée sr-only) est la réponse. Mais attention : mal implémentée, elle peut créer plus de problèmes qu'elle n'en résout.

Le problème : masquer sans supprimer

En CSS, cacher un élément semble simple. Mais chaque méthode a des conséquences différentes :

display: none et visibility: hidden retirent complètement l'élément de l'arbre d'accessibilité. Les lecteurs d'écran ne peuvent pas y accéder.

[!NOTE] Le critère RGAA 10.2 stipule que le contenu visible doit rester compréhensible quand les feuilles de style sont désactivées. Le texte masqué avec visually-hidden apparaîtra alors.

La classe visually-hidden moderne

Voici l'implémentation recommandée en 2026 :

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Décortiquons chaque propriété

• position: absolute : retire l'élément du flux sans affecter la mise en page
• width/height: 1px : réduit à la taille minimale
• margin: -1px : compense le pixel restant
• overflow: hidden : empêche tout débordement
• clip-path: inset(50%) : masque l'élément (remplace l'ancien clip)
• white-space: nowrap : évite que le texte crée une zone de scroll

[!TIP] L'ancienne propriété clip: rect(0, 0, 0, 0) est dépréciée. Utilisez clip-path: inset(50%) pour une meilleure compatibilité future.

Éléments focusables : la variante importante

Un lien d'évitement (skip link) doit apparaître quand il reçoit le focus. Sans cette variante, l'utilisateur clavier ne voit pas où est son focus.

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Avec cette règle, l'élément devient visible dès qu'il reçoit le focus :

<a href="#main-content" class="visually-hidden">
  Aller au contenu principal
</a>

Consultez notre guide sur les liens d'évitement pour l'implémentation complète.

Cas d'usage courants

1. Liens "Lire la suite" contextualisés

Sans contexte, les lecteurs d'écran lisent "Lire la suite, lien" répété pour chaque article. Ajoutez du contexte invisible :

<a href="/article-123">
  Lire la suite
  <span class="visually-hidden">de l'article : Accessibilité des formulaires</span>
</a>

Le lecteur d'écran lit : "Lire la suite de l'article : Accessibilité des formulaires, lien".

2. Labels de formulaire invisibles

Quand le design impose un champ sans label visible (comme une barre de recherche avec placeholder) :

<label for="search" class="visually-hidden">Rechercher sur le site</label>
<input type="search" id="search" placeholder="Rechercher...">
<button type="submit">
  <svg aria-hidden="true"><!-- icône loupe --></svg>
  <span class="visually-hidden">Lancer la recherche</span>
</button>

3. Instructions pour lecteurs d'écran

Ajoutez des instructions que seuls les utilisateurs de technologies d'assistance entendront :

<nav aria-label="Pagination">
  <span class="visually-hidden">Vous êtes actuellement sur la page 3 sur 10</span>
  <a href="?page=2">Précédent</a>
  <a href="?page=4">Suivant</a>
</nav>

4. Tableaux complexes

Clarifiez les relations dans un tableau sans alourdir visuellement :

<table>
  <caption>
    Comparatif des formules
    <span class="visually-hidden">. 3 formules comparées sur 4 critères.</span>
  </caption>
  <!-- ... -->
</table>

Frameworks et bibliothèques

La plupart des frameworks CSS incluent déjà cette classe :

<!-- Tailwind CSS -->
<span class="sr-only">Texte pour lecteurs d'écran</span>

<!-- Bootstrap -->
<span class="visually-hidden">Texte pour lecteurs d'écran</span>

Visually-hidden vs aria-label

Ces deux techniques semblent équivalentes, mais présentent des différences importantes :

Préférez visually-hidden quand :

• Le texte doit être traduit automatiquement
• Vous voulez que le contenu soit visible si CSS échoue
• Le texte est long ou complexe

Préférez aria-label quand :

• Vous labellisez un élément interactif unique
• Le texte est court et simple
• Vous contrôlez les traductions manuellement

L'opposé : masquer aux lecteurs d'écran

Parfois, vous voulez cacher quelque chose aux lecteurs d'écran tout en le montrant visuellement (icône décorative, image répétitive) :

<!-- L'icône est visuelle mais le texte est lu -->
<button>
  <svg aria-hidden="true"><!-- icône --></svg>
  Envoyer
</button>

L'attribut aria-hidden="true" retire l'élément de l'arbre d'accessibilité.

[!WARNING] N'utilisez jamais aria-hidden="true" sur un élément focusable ou contenant des éléments focusables. Cela crée une expérience confuse.

Erreurs courantes

1. Utiliser height: 0

/* Problématique dans certains lecteurs d'écran */
.bad-hidden {
  height: 0;
  overflow: hidden;
}

Certaines technologies d'assistance ignorent les éléments sans hauteur.

2. Oublier white-space: nowrap

Sans cette propriété, un long texte masqué peut créer une zone de scroll invisible perturbant la mise en page.

3. Masquer trop de contenu

Si vous masquez des paragraphes entiers, demandez-vous si ce contenu n'est pas nécessaire pour tous. Le design peut souvent être adapté.

Test de validation

Vérifiez que votre implémentation fonctionne :

1. Désactivez CSS dans les DevTools : le texte masqué doit apparaître
2. Testez avec un lecteur d'écran : le texte doit être lu
3. Naviguez au clavier : les éléments focusables doivent apparaître au focus

Conclusion

La technique visually-hidden est un outil essentiel pour l'accessibilité web. Elle permet d'enrichir l'expérience des utilisateurs de technologies d'assistance sans compromettre le design visuel. Utilisez-la judicieusement pour ajouter du contexte là où il manque.

Vérifiez l'accessibilité de votre contenu masqué avec RGAA Checker : notre outil analyse la structure sémantique et détecte les problèmes de nommage accessible.