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é :
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.
Lorsque des liens, ou plus généralement des éléments interactifs, sont intégrés dans un contenu destiné aux utilisateurs de lecteurs d’écran, utiliser tabindex=”-1”
sur ces éléments afin d’en empêcher l’accès par voie classique au clavier.
Par exemple :
<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; }