Masquer ou afficher un contenu

Masquer un contenu

Il peut l’être pour trois groupes d’utilisateurs :

• pour tous, en utilisant la déclaration display:none ou visibility:hidden de CSS;
• pour les utilisateurs d’une technologie d’aide, au moyen de l’attribut aria-hidden="true" pour supprimer l’élément de l’API d’accessibilité;
• pour les utilisateurs voyants, par l’entremise de la classe .wb-inv de CSS de la BOEW pour masquer le contenu.

Lorsque vous masquez du contenu inactif, comme les fenêtres modales non déclenchées et les sous-menus non sélectionnés, vous devez le masquer pour tous les utilisateurs. Les développeurs introduisent fréquemment un obstacle en dissimulant visuellement ce contenu hors écran par l’entremise du positionnement CSS, ce qui laisse le contenu affiché à l’API d’accessibilité, où les utilisateurs des lecteurs d’écran et d’autres personnes le voient. S’il faut le masquer pour les utilisateurs voyants, il doit également l’être pour les utilisateurs de lecteurs d’écran.

Utilisez l’attribut aria-hidden avec prudence et uniquement pour améliorer l’expérience des utilisateurs de technologies d’aide en éliminant l’information redondante ou superflue. Si vous utilisez aria-hidden pour masquer un contenu visible important, vous devez vous assurer que la signification et les fonctionnalités identiques ou équivalentes sont exposées aux technologies d’aide.

Le texte masqué visuellement peut :

• fournir un nom où les étiquettes ARIA ne fonctionnent pas parce que l’élément n’est pas sélectionné. Ce cas est illustré dans l’exemple du contenu généré par une CSS à la section précédente. La même approche s’appliquerait à une image d’arrière-plan en CSS ayant besoin d’un nom; par exemple, une liste contenant des logos définis comme images d’arrière-plan de CSS pourrait utiliser un nom masqué visuellement dans chaque élément de liste;
• nommer ou préciser le nom des éléments comme solution de rechange aux étiquettes ARIA. Par exemple, sur une page comportant plusieurs liens « En savoir plus », pour distinguer la fonction de chacun d’eux, le texte du titre qui précède est inséré comme élément <span> masqué dans le texte du lien.

<h3 class="mrgn-tp-0">Comment présenter une demande</h3>
<p>[Paragraphe d’accroche.]</p>
<a href="article/how-to-apply.html">
   <span class="wb-inv">Comment présenter une demande</span> 
   En savoir plus  
</a>

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

Afficher le contenu lorsqu’on le survole ou qu’on le sélectionne

Lorsque vous affichez du contenu masqué avec le pointeur ou le clavier, assurez-vous que le contenu affiché possède les trois propriétés suivantes :

Peut être ignoré

L’utilisateur peut ignorer le contenu affiché sans déplacer le pointeur de la souris ou annuler la sélection avec le clavier, habituellement en appuyant sur la touche Escape.

Peut être survolé

L’utilisateur peut placer le pointeur de la souris sur le contenu affiché.

Persistant

Le contenu affiché ne disparaît pas tant que le pointeur ne l’a pas dépassé ou que la sélection avec le clavier n’est pas annulée.

Pour en savoir plus, consultez le module 10 : Méthodes de saisie de données > Saisie avec la souris > Contenu sur survol ou cible

Ressources WCAG connexes