Certaines propriétés CSS permettent de rendre certains contenus invisibles à l’écran, et aux personnes qui auraient besoin de les consulter. Il convient donc de savoir les masquer avec les bons outils.

Objectifs

• Faciliter l’adaptation du rendu media aux besoins du lectorat (agrandissement de la taille des caractères, modification des couleurs, de la police, de la graisse, de la justification, etc.) et aux différents outils de lecture (notamment les mobiles).
• Rendre le contenu accessible aux personnes en situation de handicap.

Mise en œuvre

• Sauf si le contenu est destiné à devenir visible sur action (par exemple dans un onglet ou un menu déroulant), éviter d’utiliser les propriétés display ou visibility, l’attribut HTML hidden, ou de donner la valeur true à aria-hidden pour masquer le contenu.
• Opter plutôt pour les propriétés CSS qui permettent de placer le contenu en dehors de la zone d’affichage du navigateur (comme position ou text-indent) ou de le rogner (clip).
• Recourir aux propriétés ARIA destinées à associer un libellé à un contenu (aria-label, aria-labelledby, aria-describedby) serait une alternative.
• Dans le cas d’une étiquette de champ de formulaire, utiliser l’attribut title.

Contrôle

• Dans le code généré et dans les feuilles de styles CSS des pages examinées, détecter, à l’aide d’un inspecteur de code, la présence de contenus masqués à l’affichage, à l’exclusion de ceux destinés à devenir visibles sur action.
• Vérifier qu’aucun de ces contenus n’utilise les techniques interdites mentionnées dans la mise en œuvre lorsqu’ils sont destinés à être restitués par une technologie d’assistance.