Zoom sur l’accessibilité du menu de navigation du site de Conseil Général du Val-de-Marne
Nous avons récemment eu le plaisir d’intervenir sur le projet de refonte du site web du Conseil Général du Val-de-Marne (valdemarne.fr).
Nous en profitons dès à présent pour remercier tous les acteurs de ce projet, et plus particulièrement Marie Dujardin pour nous avoir autorisé à citer valdemarne.fr.
Dans ce billet, nous souhaitons mettre en lumière l’excellent niveau d’accessibilité de son menu de navigation principal basé sur le non moins excellent script proposé gracieusement par Adobe : « Accessible Mega Menu ».
Navigation au clavier
Une des particularités de ce menu est que son comportement à la souris n’est pas identique à son comportement au clavier : tandis que le survol des entrées de premier niveau affiche leur sous-menu, leur prise de focus ne l’affiche pas.
Une fois le focus sur une entrée de premier niveau, c’est l’appui sur la touche « Entrée », « Espace » ou « Flèche bas » qui permet d’afficher son sous-menu.
Ce comportement est par exemple très pratique pour un utilisateur qui souhaiterait rapidement afficher le sous-menu de l’entrée « Vivre en Val-de-Marne » : il n’est pas forcé de tabuler dans l’ensemble des liens des sous-menus « À votre service » et « Conseil Général ».
Ensuite, lorsque qu’un sous-menu est affiché, il est possible de parcourir les différents liens y figurant en utilisant soit la touche « Tab » soit les flèches.
De la même manière que précédemment, la navigation par les flèches permet à l’utilisateur clavier de se déplacer très rapidement dans la totalité de ce menu.
Un autre point positif d’accessibilité est qu’une pression de la touche « Échap » permet de fermer l’éventuel sous-menu affiché.
Navigation avec un lecteur d’écran
Ce menu intègre de l’ARIA (Accessible Rich Internet Applications).
Pour résumé, ARIA est une spécification qui permet notamment d’améliorer la compréhension des composants d’interface riche et l’expérience de navigation pour les personnes non ou malvoyantes naviguant avec un lecteur d’écran (synthèse vocale et/ou plage braille).
Parmis les attributs ARIA employés dans ce menu, nous avons aria-expanded.
aria-expanded est intégré dans les balises <a> des entrées de premier niveau, soit « À votre service », « Conseil Général » et « Vivre en Val-de-Marne ».
Concrètement, par exemple, quand le sous-menu de l’entrée « À votre service » est affiché, la valeur de l’attribut aria-expanded de sa balise <a> passe de « false » à « true ».
Ainsi, grâce à cela, le lecteur d’écran de l’utilisateur non ou malvoyant restitue l’état de ce sous-menu : affiché ou masqué.
À noter que plusieurs autres attributs ARIA pertinents sont utilisés dans ce menu, parmis lesquels :
Structuration HTML
Ce menu de navigation est structuré avec des balises <ul> et <li> imbriquées.
Ce qui rend sa composition parfaitement compréhensible par les personnes non ou malvoyantes naviguant avec un lecteur d’écran.
Aussi, le role="navigation" intégré dans la balise <div id="back-container"> permet notamment à ces mêmes utilisateurs d’atteindre très rapidement ce menu de navigation (via un raccourci proposé par le lecteur d’écran).
À noter qu’un léger point d’amélioration pourrait consister à remplacer la balise <div id="back-container"> par <nav id="back-container">.
Crédits
Le site du Conseil Général du Val-de-Marne a été conçu par La Netscouade puis développé par Mamasam.
Vos commentaires
-
Bonjour,
Ce menu est en effet plutôt bien conçu mais je me permets tout de même quelques remarque sur l’utilisabilité.
– Quand on déroule une liste il est pour moi important que l’utilisateur sache où il se situe dans la liste. Pour se faire le nombre d’éléments présents dans la liste doit être vocalisé par le lecteur d’écran dès qu’elle s’ouvre et la position de l’élément de liste atteint également (élément 1 sur 4, élément 2 sur 4…).
– Tous les sous-éléments sont bien atteignables au clavier. Mais les premiers éléments de liste sont automatiquement développés (exemple la liste « Actualités » sous « Vivre en Val-de-Marne »). Dans ce cas on ne donne pas à l’utilisateur au clavier le choix de l’action et de plus au lecteur d’écran il se sait, comme dit ci-dessus, combien d’éléments il y a dans la sous-liste.
– Chose plus gênante, le fait de devoir tabuler sur tous les éléments d’une sous-liste pour pouvoir atteindre l’élément suivant de la liste parent. Le premier réflexe de l’utilisateur au clavier sera de faire « Echap » pour fermer la sous-liste afin de revenir à la liste parent mais ici la touche « Echap » ferme complètement le menu. Cela nuit au fonctionnement intuitif du menu. Ici la touche « Entrée » ou « Espace » doit déclencher l’ouverture des sous-liste et la touche « Echap » doit permettre d’en sortir pour revenir à la liste parent. Une nouvelle pression sur la touche « Echap » fermera le menu. Pour moi c’est un piège au clavier qui peut être sanctionné par le critère 12.9 du RGAA car l’utilisateur ne peut pas atteindre directement l’élément précédent ou suivant d’une liste avec la touche tabulation.
Je conçois que cet article date un peu mais je suis tout de même preneur de votre retour quant à mes remarques.
Merci.
-
Bonjour Mickaël,
Vous avez raison de mentionner que cet article date un peu.
Le site a peut-être été mis à jour entre temps, mais le fait est que cette technique de gestion des menus et sous-menus n’est plus appropriée pour l’accessibilité et ne fonctionne pas très bien. Ici on préfèrera privilégier l’utilisation du motif de conception Menu déroulant qui permet une meilleure accessibilité au clavier ainsi qu’au lecteur d’écran en évitant effectivement une ouverture des sous-menus à la prise de focus.
Concernant la tabulation dans les menus, on pourrait invalider le critère 12.8 du RGAA pour un ordre de tabulation incohérent (on s’attend à tabuler sur les catégories du menu et non à tabuler automatiquement dans tous les sous-menus), mais je ne pense pas que l’on pourrait considérer cela comme un piège au clavier, qui désigne vraiment un empêchement et non une difficulté de tabuler sur le prochain élément.
Enfin, il n’est pas prévu par les lecteurs d’écran de pouvoir vocaliser la position de l’élément dans une liste. Il est possible cependant de connaître le nombre total d’éléments dans une liste lorsqu’on arrive au niveau du premier élément de liste. Il n’y a donc aucun problème de gestion de liste ici.
Bien à vous,
Romain
-
