Masquer le contenu correctement
Toutes les méthodes de masquage du contenu ne conviennent pas aux utilisateurs de lecteurs d’écran ou d’autres technologies d’assistance. Cette page décrit les principales méthodes pour masquer le contenu pour tous les utilisateurs ainsi que pour ceux utilisant des lecteurs d’écran.
Rendre le contenu invisible (visuellement caché)
Si un élément sur la page :
- est un élément interactif qui doit être rendu invisible mais toujours accessible (par exemple, un lien, une case à cocher, un commutateur ou un contrôle de formulaire personnalisé),
- est un titre ou une étiquette pour quelque chose dont l’objectif est évident (et donc l’étiquette ne doit pas être visible aux utilisateurs voyants, par exemple, une étiquette de section ou d’élément de formulaire),
- ne doit pas être visible pour les utilisateurs voyants mais doit être accessible aux utilisateurs de lecteurs d’écran,
... alors vous devez le rendre invisible (visuellement caché).
Vous pouvez le faire en :
attribuant à l’élément la classe visually-hidden,
dans Drupal 8, en configurant les champs dans la page de gestion de l’affichage pour les sous-types d’entités (par exemple, le champ « Tags » dans le type de contenu Article) pour définir l’étiquette du champ sur « - Visually Hidden - »,
utilisant du CSS pour positionner l’élément hors de la zone visible de la page, ou,
utilisant le CSS suivant :
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; word-wrap: normal;
sur l’élément.
Exemple :
Masquer le titre d’un message d’erreur, d’avertissement ou d’état.
Justification :
Dans la plupart des thèmes, les messages d’état sont affichés bien en vue dans une bordure colorée, attirant l’attention des utilisateurs voyants, mais conformément à la section 1.3.3 WCAG 2.0, la compréhension et l’utilisation du contenu ne doivent pas reposer uniquement sur des caractéristiques sensorielles telles que forme, taille, position visuelle ou orientation.
Sans un titre indiquant qu’il s’agit de messages d’état, ils peuvent dérouter les utilisateurs de lecteurs d’écran.
La plupart des lecteurs d’écran peuvent parcourir la page via ses titres. Fournir un titre pour les messages facilite leur repérage.
Rendre le contenu invisible jusqu’à ce qu’il soit ciblé par clavier
Si un élément sur la page :
- est un lien destiné à aider les utilisateurs à accéder au contenu principal ou à la navigation principale,
- est une alternative à d’autres éléments utilisables uniquement à la souris, ou,
- ne doit tout simplement pas être visible pour les utilisateurs voyants sauf s’ils naviguent avec le clavier,
... alors vous devez le rendre invisible jusqu’à ce qu’il soit ciblé au clavier.
Vous pouvez le faire en :
- attribuant à l’élément les classes visually-hidden et focusable, ou,
- utilisant ce CSS :
css_selector_for_my_element {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}
où css_selector_for_my_element est le sélecteur CSS de l’élément que vous souhaitez cacher jusqu’à ce qu’il soit ciblé au clavier.
Exemple :
Le lien « Aller au contenu principal » en haut de chaque page dans les thèmes principaux.
Justification :
Les utilisateurs qui utilisent uniquement le clavier et les lecteurs d’écran veulent accéder rapidement au contenu principal de la page.
Pour être conforme à la section 2.4.1 WCAG 2.0, vous devez fournir un moyen de passer les blocs de contenu répétés sur plusieurs pages.
Masquer complètement le contenu pour tous les utilisateurs
Si un élément sur la page :
- ne doit pas être affiché tant qu’un événement JavaScript ne le rend pas visible,
- n’a pas de pertinence pour les utilisateurs voyants ou de lecteurs d’écran dans le contexte,
- contient des valeurs lues/écrites par JavaScript mais qui ne doivent jamais être affichées directement, ou,
- ne doit généralement pas être visible pour les utilisateurs voyants ou de lecteurs d’écran,
... alors vous devez le masquer complètement pour tous les utilisateurs.
Vous pouvez le faire en :
- attribuant la classe hidden (Drupal 8),
- si c’est un champ dans un sous-type d’entité, en configurant son format sur « - Caché - » dans la page de gestion de l’affichage pour ce sous-type d’entité,
- si c’est une étiquette de champ dans un sous-type d’entité, en configurant son affichage sur « - Caché - » dans la page de gestion de l’affichage pour ce sous-type d’entité, ou,
- en utilisant le CSS display: none;
Exemple :
Masquer la zone d’aperçu du module couleur jusqu’à l’exécution de Javascript :
/* color.css (Drupal 7 et 8) */
#preview {
display: none;
}
Justification :
L’aperçu ne fonctionne pas si JavaScript est désactivé, il n’est donc pas nécessaire à personne.
Mauvaise utilisation
Une mauvaise utilisation fréquente de « display:none » est la suppression d’une étiquette ou d’un titre de formulaire pour modifier l’apparence de la page. Cependant, cela rendra l’élément inutilisable pour les utilisateurs de lecteurs d’écran !
Par exemple, si vous supprimez une étiquette de formulaire avec « display:none », un utilisateur de lecteur d’écran peut dire : « J’ai un champ texte obligatoire mais je ne sais pas à quoi il sert ». Dans ce cas, il serait plus approprié de rendre le contenu invisible (visuellement caché).
Rendre le contenu invisible aux lecteurs d’écran
Si un élément sur la page :
- est déroutant en soi, ou,
- doit être visible uniquement pour les utilisateurs voyants,
... alors vous devez le rendre invisible aux lecteurs d’écran.
Vous pouvez le faire en :
- attribuant à l’élément l’attribut aria-hidden="true"
Exemple :
Un contrôle pour supprimer un filtre de recherche affichant un « x » seulement pour les utilisateurs voyants, avec des instructions accessibles visuellement cachées pour les lecteurs d’écran :
Currently filtering by: <a href="...">Module <span class="visually-hidden">Cliquez pour retirer ce filtre.</span> <span aria-hidden="true">x</span></a>
Justification :
Un texte alternatif accessible est déjà fourni.
Seul l’écoute du « x », même après avoir entendu le texte alternatif, peut perturber les utilisateurs de lecteurs d’écran.
Mauvaise utilisation
Créer du contenu invisible pour les lecteurs d’écran signifie que les personnes qui en ont besoin ne peuvent ni percevoir ni interagir avec ce contenu. Pour être conforme à la section 1.1 WCAG 2.0, vous devez fournir un contenu alternatif accessible, sinon les utilisateurs de technologies d’assistance ne pourront pas utiliser ce contenu.