Techniques CSS pour cacher du texte

Cette page donne différentes techniques permettant de rendre un texte invisible mais accessible aux lecteurs d’écran.

Voir la page : CSS in Action – Invisible Content Just for Screen Reader Users sur le site WebAIM.

Techniques innapropriées

Texte caché / invisible

visibility: hidden;

display: none;

Attention ! Les éléments seront cachés / invisibles pour tout le monde, y compris pour les lecteurs d’écran.

Dimension nulle

width: 0; height:0;

font-size:0;

line-height:0;

Ne pas utiliser.

Indentation négative

text-indent: -10000em;

Ne pas utiliser.

Techniques conseillées

Utiliser l’une des deux méthodes ci-dessous.

Recadrage 1 pixel

Code CSS :

.hidden {
   position: absolute !important;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;
   width: 1px;
}

Code HTML :

<div class="hidden">Ce texte est caché.</div>

Positionnement en dehors de l’écran

Code CSS :

.hidden {
   position: absolute;
   left: -10000em;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

Code HTML :

<div class="hidden">Ce texte est caché.</div>

Explications :

• position: absolute; retire l’élément du flux pour le positionner en mode absolu ;
• left: -10000em; positionnement latéral en dehors de l’écran (à gauche) ;
• top: auto; positionnement vertical à la même hauteur (peut poser des problèmes si omis) ;
• width: 1px; height: 1px; overflow: hidden; par précaution (réduit le contenu à un carré de 1 pixel de côté et cache tout ce qui pourrait déborder, le cas échéant).

N.B. : Ne pas utiliser le positionnement vertical (par exemple : left: 0; top: ‑10000em;), car si l’élément contient des éléments focusables, cela aura pour conséquence de provoquer le défilement de la page dans la fenêtre du navigateur.

Exemples

Formulaire de recherche

Pour cacher l’étiquette (obligatoire) d’une zone de recherche dans un formulaire de recherche :

<form id="rechercher" role="search" method="get" action="/rechercher>
   <label for="q" class="hidden">Rechercher :</label>
   <input id="q" name="q" placeholder="Rechercher" type="text">
   <input type="image" alt="Rechercher" src="rechercher.png">
</form>

Fil d’Ariane

Pour cacher un texte « Vous êtes ici : » juste avant un fil d’Ariane :

<p id="breadcrumbs">
   <span class="hidden">Vous êtes ici : </span>
      <a href="/">Accueil</a> »
      <a href="/articles/">Articles</a> » Titre de l’article
</p>

Liens d’évitement ou d’accès rapide

La zone contenant le lien est cachée mais devient apparente lorsqu’elle recoit le focus (avec la touche tabulation).

HTML :

<div id="acces-rapide">
   <a href="#contenu-principal">Aller au contenu principal</a>
</div>

CSS :

/* Caché par défaut */

#acces-rapide a {
   position: absolute;
   left:-10000em;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
}

/* Visible à la réception du focus */

#acces-rapide a:focus {
   position:static;
   width:auto;
   height:auto;
}

Formulaires

La technique peut être employée pour des champs de formulaire, par exemple pour un numéro de téléphone contenant plusieurs parties :

Téléphone :

+33

1 23 45 67 89

N.B. : On peut aussi utiliser les attributs title ou aria-labelledby.