Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

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.

Cas 1 : ces éléments sont masqués mais peuvent être affichés sur action de l'utilisateur

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.

Cas 2 : ces éléments sont masqués mais ne seront jamais affichés

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

Cas 2.1 : les éléments inutiles pour tous les utilisateurs

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;.

Cas 2.2 : les éléments qui sont utiles pour les utilisateurs de lecteurs d'écran, mais inutiles pour les autres utilisateurs

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.

Attention

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;
}

Recommandations associées

notices/html-css/ne-pas-utiliser-les-proprietes-css-display-ou-visibility-pour-masquer-un-contenu-qui-ne-peut-pas-etre-affiche-par-l-utilisateur.txt · Dernière modification: Le 06/03/2013 à 16:52 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :