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.