Composants permettant d'afficher/masquer des contenus
Un "disclosure widget" permet d'afficher – ou de masquer – des contenus sous un titre. Cela permet d'économiser de la place et de donner une vision d'ensemble des contenus de la page.
Souvent un symbole, comme un plus [+] ou une flèche vers le bas [▼] à proximité du titre permet de détecter la présence de contenus cachés. Quand le contenu est affiché, le symbole est remplacé par un minus ou une flèche vers le haut [▲].
A quoi ressemble un composant permettant d'afficher/masquer des contenus ?
Le site Web de la banque kfw.de utilise ce mécanisme pour les pages les plus chargées en contenus. Les utilisateurs peuvent afficher le titre complet et les contenus associés sous le titre.
Description vidéo
Un utilisateur naviguant au clavier tabule sur un widget permettant d'activer les titres.
- En arrivant sur le titre, la couleur change et le texte est souligné. Son intitulé, son rôle et son état (masqué) sont annoncés par le lecteur d'écran.
- Les textes cachés sont affichés à l'activation du bouton. Le nouvel état (affiché) est annoncé.
- L'utilisateur tabule dans les autres titres et affiche d'autres contenus.
Quelles sont les difficultés rencontrées par les utilisateurs face à l'affichage ou la fermeture de contenus masqués ?
Ces mécanismes posent souvent problème aux utilisateurs naviguant au clavier ou via commande vocale.
1 Utilisateurs naviguant au clavier : les contrôles inaccessibles et impossibles à activer au clavier
Souvent les contrôles ne prennent pas le focus et ne sont pas activables au clavier. Les scripts associés marchent uniquement avec une souris ou via une interaction tactile. Pour les personnes naviguant au clavier, ces implémentations, même lorsque certains contenus cachés prennent bien le focus comme ici, rendent la page inaccessible.
A noter que les contrôles ont également une taux de contraste faible (gris sur blanc).
Description vidéo
Sur le site web flybmi.com, un utilisateur naviguant au clavier essaie d’accéder aux contenus cachés.
- Il tabule dans le menu
- Après l'élément "Demander", le focus saute aux contenus du pieds de page
- En remontant les éléments du pied de page, le focus saute de nouveau le contenu principal de la page
- En utilisant la souris, le contrôle marche
2 Commande vocale : les contrôles inaccessibles à la voix
Quand les contrôles ne sont pas implémentés avec des liens ou boutons natifs, ils sont inaccessibles (ou en tout cas très difficile à activer) pour des personnes naviguant à la commande vocale.
Description vidéo
Un utilisateur veut activer des liens sur une page Web.
- Elle arrive a numéroter les liens, mais n'arrive pas à les activer en annonçant les numéros correspondants
- Les contrôles "Bewilligungsstatistik" et "Verwendungsnachweisstatistik" ne sont pas activables à la voix - ils ne sont pas correctement implémentés comme des liens ou des boutons natifs (ou via des rôles ARIA)
- En revanche, l'activation des onglets dans le panneau qui suit marche parce que les onglets sont construits à partir de liens natifs.
Comment créer des mécanismes permettant de masquer/afficher des contenus qui sont accessibles ?
- Utiliser des balises d'entêtes pour les éléments visibles qui précédent des contenus masqués. Cela permet aux utilisateurs de lecteurs d'écran à avoir une vue d'ensemble des contenus de la page. Autre solution : s'il s'agit de glossaire ou FAQ, utiliser les balises relatives aux définitions.
- Faire en sorte que les contenus masqués se trouvent directement après l'élément déclencheur - pas uniquement visuellement mais aussi dans le code source. Les utilisateurs de lecteurs d'écran peuvent alors utiliser les flèches pour parcourir le texte affiché.
- Utiliser un bouton comme contrôle. Cela permet de faire en sorte que l'élément prend automatiquement le focus au clavier (il ne faut pas utiliser
tabindex="0"
pour rendre l'élément déclencheur accessible au focus). - Faire en sorte que le bouton continue à garder le focus après activation. Cela permet aux utilisateurs naviguant au clavier de facilement développer/réduire le contenu.
- Utiliser l'attribut
aria-expanded
sur le bouton. Cette valeur permet de savoir si le contenu est affiché (aria-expanded="true"
ou masqué (aria-expanded="false")
- S'assurer que l'état est à jour. Vérifier que l'attribut
aria-expanded
se met automatiquement à jour lorsque l'utilisateur active le bouton. - Si l'élément déclencheur est un lien, il lui faut un
role=button
. Le fait d'activer un contrôle n'amène pas quelque part, mais déclenche quelque chose - d'ou le fait qu'un lien est peu adapté. - Vérifier que le symbole a un taux de contraste satisfaisant (3:1 ou plus).
- Inclure le symbole dans l'intitulé de bouton, avec un attribut alt vide lorsqu'il s'agit d'une image. Si le symbole est un font icon, utiliser
aria-hidden
pour cacher l'icône.
Pour aller plus loin (ressources en anglais)
- WAI-ARIA Authoring Practices 1.1, 3.9 Disclosure (Show/Hide) (W3C Working Group Note, juillet 2018)
- Collapsible sections (Heydon Pickering, Inclusive Components, octobre 2017)
- Disclosure button design pattern:
button
element (Léonie Watson, Tink.uk, sans date)