[Accessibilité] - Page Orienter un bénéficiaire
Contexte
Résultats du rapport d'audit d'accessibilité
Page Orienter un bénéficiaire : https://resin.grandlyon.com/orientation
Objectif
Corriger les problèmes d'accessibilité restants.
Faire ce qui est raisonnable. N'hésitez pas à signaler ce qui est trop compliqué, ça pourra être discuté et/ou reporté en accord avec Erwan.
Ressources
Rapport envoyé par mail
Tâches
-
A faire dans #596 (closed)
À l’étape « Récapitulatif d’orientation » les icônes (svg) dans la section « Accès » sont porteuses d’informations : elles renseignent les noms et numéros des transports. Il faut donc supprimer l’attribut « aria-hidden="true" », changer la valeur de l’attribut « role » (« role="img" ») et ajouter l’attribut aria-label="Métro B" (Bus C4, etc…).
-
!883 (merged)
À chaque validation d’étape, il faut revoir la position du focus pour la navigation au clavier. On se retrouve à chaque fois au niveau des onglets du navigateur (on doit parcourir l’url, la barre des favoris personnel, etc..). Il faut par exemple mettre le focus au niveau de la barre de progression qui va annoncer « Progression dans ce formulaire : 29% ». -
!884 (merged)
À l’étape d’affichage de la liste des structures, il faut mettre en place un raccourcis clavier (ou une ancre cachée et visible à la prise de focus lors de la navigation clavier) qui permette de passer directement au bouton « Suivant ». Car actuellement on doit tabuler à travers les centaines de structures avant d’atteindre les boutons « Précédent » / « Suivant »
-
!877 (merged)
À l’étape « De quel accompagnement la personne a-t-elle besoins ? », il faut revoir la navigation au clavier car à chaque tabulation on valide le bouton radio précédent. Par exemple, on sélectionne le premier élément « Trouver une structure […] », puis on effectue 2 tabulations, le deuxième élément « Demander un rendez-vous » se retrouve sélectionné.
(+ si faisable, vérifier que c'est OK sur les radio button de l'onboarding)
-
!878 (merged)
À l’étape d’affichage de la liste des structures, lorsque la fenêtre est réduite à une largeur de 320px, les boutons « Ajouter » sont tronqués (dû à la taille des tags comme « Médiathèque/Bibliothèque »). Il faut ajouter une propriété CSS « flex-direction: column; » au niveau du parent pour le bouton passe en dessous.
-
!882 (merged)
À l’étape « Récapitulatif d’orientation », lorsque la fenêtre est réduite à une largeur de 320px, des contenus sont tronqués (sections « Bénéficiaires » et « Modalités d’accès »).
