Cacher du texte

Il existe plusieurs façons de cacher du texte, des images ou tout autre élément sur une page web. Choisissez la meilleure technique en fonction de vos objectifs :

• Invisible pour tous : display:none
• Invisible pour tous sauf pour les lecteurs d'écran : clip
• Cacher des éléments visibles aux lecteurs d'écran : aria-hidden

Invisible pour tous

Les pages web contiennent des éléments cachés qui deviennent visibles après une action de l'utilisateur. Exemples :

• Les diapositives inactives d'un diaporama et les onglets cachés d'un ensemble d'onglets.
• Les réponses d'un module de FAQ qui ne sont pas visibles.
• Le sous-menu d'un menu déroulant.
• Le contenu destiné à apparaître dans une lightbox.
• Le lien qui fera apparaître le menu sur les sites 'responsive'. Ce lien n'apparaît que sur les petits écrans. (mobiles, tablettes...)

Display:none

Ces éléments doivent être cachés pour tous. Utilisez "display: none" pour les cacher. Une autre option est "visibility:hidden" : le texte est caché, mais prend toujours la même place dans la page. Plus d'explications dans l'article Hiding elements with CSS.

En utilisant display:none ou visibility: hidden, le contenu :

• N'apparaîtra pas dans le navigateur.
• Ne sera pas lu par un lecteur d'écran.
• Ne sera pas repris dans l'ordre de tabulation.

Par contre, les éléments cachés de cette manière pourront :

• Être lus dans le code source.
• Apparaître lorsque le CSS est désactivé ou mal supporté.
• Être lus par d'anciennes versions de lecteurs d'écran qui ne prennent pas en compte le CSS.
• Être indexés par les moteurs de recherche.

N'utilisez donc cette technique que pour du contenu caché temporairement destiné à être affiché sous certaines conditions. Sinon, effacez-le du code source ou placez-le en commentaire.

L'attribut hidden de HTML5

En HTML5, l'utilisation de l'attribut 'hidden' sur un élément donne l'instruction au navigateur (s'il le supporte) de cacher cet élément via l'instruction 'display:none' de la feuille de style du navigateur.

Texte invisible, mais lu par un lecteur d'écran

Dans certains cas, vous pourriez souhaiter ajouter du texte qui ne doit pas être visible à l'écran, mais qui aide une personne aveugle à naviguer dans la page ou à comprendre la structure/le contenu plus facilement. Par exemple :

• texte de remplacement pour les images d'arrière-plan.
• alternative textuelle pour les polices d'icônes (NL) (icon fonts) significatifs,
• alternative à l'information visuelle telle que le poids d'une étiquette dans un nuage de tags (NL).

N'utilisez pas les techniques ci-dessous pour cacher des éléments qui contiennent des liens, des boutons ou des éléments de formulaire. Ceux-ci, comme un lien d'évitement ou le bouton de pause d'une animation, ne sont probablement pas destinés uniquement aux utilisateurs de lecteurs d'écran. Si vous les cachez, ils seront invisibles, mais resteront présents dans la page. Ils recevront le focus lors de la tabulation, ce qui donnera l'impression à un utilisateur de clavier de tabuler dans le vide.

Clip

En assignant 0 à la propriété clip de CSS, on rend l'élément invisible, sauf pour les lecteurs d'écran.

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

Parmi d'autres, HTML5 Boilerplate utilise ceci :

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Positionnement hors écran

Une autre technique consiste à positionner le texte hors de la portion visible de l'écran. Celui-ci devient invisible pour tous sauf pour les lecteurs d'écran.

.hidden {
    position: absolute;
    left: 0;
    top: -10000px;
    overflow: hidden;
}

Caché seulement pour les lecteurs d'écran

Dans certains cas exceptionnels, vous souhaiterez l'inverse : rendre invisibles uniquement pour les lecteurs d'écran des éléments qui sont affichés par le navigateur. Par exemple pour un élément qui sert davantage pour la mise en forme et qu'il vaut mieux ne pas lire. Ou afin d'éviter que le lecteur d'écran ne lise des informations redondantes ou inutiles.

Aria-hidden

Dans ce cas, vous pouvez utiliser ARIA. Un élément avec l'attribut aria-hidden="true" est ignoré par les lecteurs d'écrans mais reste visible pour les autres visiteurs.

Extrait des spécifications ARIA du W3C :

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.

Important : l'ajout de aria-hidden="true" à un élément, s'applique également aux éléments imbriqués. Il conviendra dès lors de l'utiliser avec la plus grande prudence et tester avec un lecteur d'écran.