DISIC / observatoire

🕵️‍♀️ Observatoire de la qualité des démarches en ligne
https://observatoire.numerique.gouv.fr/
GNU Lesser General Public License v3.0
10 stars 4 forks source link

Rendre les onglets de la page de la démarche accessibles #1149

Closed lucaa closed 2 years ago

lucaa commented 2 years ago

Les onglets de la page de la démarche doivent être accessible du pdv RGAA.

lucaa commented 2 years ago

Audit à faire.

AnthonyBrunelli commented 2 years ago

Tout est là : https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic.html

à l'heure actuelle, possibilité de passer d'un onglet à l'autre par tab, mais problème si on rentre dans une page. La navigation entre onglet doit se faire par les flèches (et autres précisions dans le liens ci-dessus).

lucaa commented 2 years ago

@ClemDee : explore d'abord les possibilités et suggestions de bootstrap, je sais que sur leur doc ils mettent pas mal de recommandations sur l'accessibilité mais il n'est pas sur qu'on les a suivi à l'implémentation. Il faudrait d'abord vérifier cette piste avant de chercher une autre solution.

clemdee commented 2 years ago

Il manquait quelques attributs sur les onglets des panels (notamment role="tab" et data-toggle="tab") que j'ai rajouté.

Cependant cela ne change en rien le fait que le comportement des onglets décris par la spec w3.org n'est pas du tout implémentée par bootstrap, qui se contente juste de rendre les onglets focusable via la touche Tab. J'ai donc implémenté le comportement décris par la spec via un jsx sur la page DemarchesSheet, désormais seulement l'onglet courant est focusable via "Tab", et le changement d'onglet se fait par les touches fléchées.