10.1.1. Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l'utilisateur

Lorsque des éléments sont présents dans le code HTML, mais ne sont pas affichés par défaut à l’écran, deux cas se présentent.

Concernant le premier cas, il peut s’agir par exemple du contenu d’une pop-in, d’un menu déroulant, ou encore des différents panneaux d’un carrousel dynamique.

Pour savoir comment prendre en compte l’accessibilité de ces éléments, se référer à la Notice d'accessibilité interfaces riches et JavaScript.

Les éléments masqués mais qui ne seront jamais affichés peuvent être également classés en deux sous-types.

Les éléments inutiles pour tous les utilisateurs doivent, par ordre de priorité :

1. Être supprimés du code HTML.
2. Si cela n’est pas possible, être masqués à l’aide des propriétés CSS display: none; ou visibility: hidden;.

Les éléments utiles aux utilisateurs de lecteurs d’écran doivent quant à eux être rendus invisibles ou sortis de l’écran à l’aide des propriétés CSS opacity: 0; ou position: absolute; par exemple.

Il peut s’agir par exemple d’indications servant à faciliter la navigation dans les pages, de liens d’évitement, etc.

<a href="alternative-carte-interactive.html" tabindex="-1" class="a11y">Utilisateurs de lecteurs d'écran, veuillez suivre ce lien pour accéder à la version alternative de la carte interactive.</a>

.a11y
{
position: absolute;
left: -999999px;
}