Contenu caché

Le contenu caché désigne tout élément rendu invisible par CSS, HTML ou ARIA. En accessibilité, « invisible » ne suffit pas : il faut savoir pour qui. display: none cache un élément pour tout le monde, .visually-hidden le masque uniquement à l'écran, et aria-hidden le masque uniquement aux technologies d'assistance.

Un bouton avec une icône poubelle, sans texte. Un menu qui s'ouvre au clic. Un lien « Lire la suite » répété six fois dans la page. Ces situations exigent de cacher du contenu, mais pas de la même manière.

#Trois façons de cacher, trois effets différents

Le web a trois niveaux de visibilité. Les confondre est le piège le plus courant.

Caché pour tout le monde. display: none, visibility: hidden ou l'attribut HTML hidden retirent l'élément de l'affichage et de l'arbre d'accessibilité. Les lecteurs d'écran ne le vocalisent pas. C'est le bon choix pour un menu fermé ou un panneau d'accordéon replié.

Caché visuellement, accessible aux lecteurs d'écran. La classe .visually-hidden (aussi appelée .sr-only) utilise un pattern CSS éprouvé pour réduire l'élément à un pixel invisible, tout en le gardant dans l'arbre d'accessibilité :

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

Usage typique : ajouter un texte explicatif sur un bouton-icône, ou enrichir un lien « Lire la suite » du contexte que seuls les lecteurs d'écran perçoivent. Pour les liens d'évitement, ajoutez :not(:focus):not(:active) au sélecteur pour que le lien redevienne visible au focus clavier.

Visible à l'écran, caché des technologies d'assistance. L'attribut aria-hidden="true" fait l'inverse : l'élément reste affiché mais disparaît de l'arbre d'accessibilité. Utile pour une icône décorative dans un bouton qui possède déjà un texte.

#Le piège qui casse la navigation clavier

Mettre aria-hidden="true" sur un élément focusable crée un trou noir. L'utilisateur au clavier atteint l'élément, mais son lecteur d'écran ne vocalise rien. MDN le rappelle : ne jamais appliquer aria-hidden sur un élément qui peut recevoir le focus.

L'erreur symétrique existe : cacher du texte avec display: none alors qu'il était destiné aux lecteurs d'écran. Le texte disparaît pour tout le monde. Vous vouliez ajouter du contexte, vous l'avez supprimé.

#En résumé

Avant de cacher un élément, une question : caché pour qui ? Tout le monde → display: none. Les yeux seulement → .visually-hidden. Les technologies d'assistance seulement → aria-hidden="true".