Development #40921
Development #36305: Améliorer l'accessibilité (RGAA) des thèmes
[RGAA] les étapes doivent avoir un role progressbar
0%
Description
Les processus à étapes, comme le formulaire de soumission de plainte, sont des systèmes de progression et doivent avoir un role=progressbar pour pouvoir indiquer à l'utilisateur l'avancement du processus.
Pour indiquer l'avancement du processus aux technologies d'assistance, on peut utiliser l'exemple suivant :
<div role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuetext="Etape 1 : Le demandeur" aria-valuemax="3">
<ul>
<li> Etape 1</li>
[…]
</ul>
</div>
Files
| etapes.png (9.01 KB) etapes.png | |||
| 0001-templates-add-aria-attributes-to-steps-markup-40921.patch (1.23 KB) 0001-templates-add-aria-attributes-to-steps-markup-40921.patch |
Related issues
Associated revisions
History
Updated by Frédéric Péters almost 3 years ago
- Related to Development #40934: accessibilité, attributs sur la barre d'étapes added
Updated by Frédéric Péters almost 3 years ago
- File 0001-templates-add-aria-attributes-to-steps-markup-40921.patch 0001-templates-add-aria-attributes-to-steps-markup-40921.patch added
- Status changed from Nouveau to Solution proposée
- Patch proposed changed from No to Yes
Suggestion prévue pour l'ancien balisage, actualisation pour le nouveau mais ça aurait intéressant d'avoir un retour concernant les améliorations déjà en place.
Updated by Marie Kuntz (absente) almost 3 years ago
Frédéric Péters a écrit :
ça aurait intéressant d'avoir un retour concernant les améliorations déjà en place.
un retour de qui ?
Updated by Frédéric Péters almost 3 years ago
Un retour de personnes spécialisées dans l'accessibilité.
Updated by Serghei Mihai almost 3 years ago
- Status changed from Solution proposée to Solution validée
- Assignee set to Frédéric Péters
Updated by Thomas Jund almost 3 years ago
- Status changed from Solution validée to Solution proposée
- Assignee deleted (
Frédéric Péters)
Lors de la mise à jour du module, je suis parti pour en faire un titre (ou sous titre).
Toutes les étapes non active sont en aria-hidden.
Seul l'étape active est retournée sur la forme
"Etape X sur X : label de l'étape en cours"
Je trouvais ça beaucoup plus efficace pour un lecteur d'écran que de devoir parcourir les labels de toutes les étapes. Aujourd'hui le lecteur d'écran d'écran ne retourne que l'étape en cours (ce qu'affiche la version mobile).
Et niveau sémantique je trouvais logique d'en faire un titre.
À voir comment le lecteur d'écran se comporte avec les attribut aria "progressbar".
Mais pour rester logique avec la version mobile, il faudrait que l'attribut progressbar soit uniquement sur l'élément actif.
Updated by Thomas Jund almost 3 years ago
https://www.w3.org/WAI/tutorials/forms/multi-page/
En gros, aujourd'hui on est plutôt entre l'approche 2 et 4 (mais surtout 2 en version mobile).
Et l'audit nous conseil l'approche 3.
J'aurais préféré que le role progressbar soit placé sur l'élément ol, pour ne pas remplacer la sémantique de la balise header.
Updated by Frédéric Péters almost 3 years ago
Ça me va très bien de ne rien faire si la situation actuelle est considérée correcte.
Updated by Thomas Jund almost 3 years ago
Ça me va très bien de ne rien faire si la situation actuelle est considérée correcte.
J'en suis pas sûr sûr. On a une balise header mais l'étape active n'est pas un titre pour autant.
Je vais tester les retours de lecteurs d'écran avec et sans progressbar.
Updated by Thomas Jund over 2 years ago
suite à l'audit RGAA avec la CNIL, il s'avère que le role progressbar sur ce type de composant est devenu obligatoire depuis RGAA 4 de septembre dernier :
Critère 7.5 Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d'assistance ?
Test 7.5.3 : Chaque message de statut qui indique la progression d'un processus utilise-t-il l'un des attributs WAI-ARIA role="log", role="progressbar" ou role="status" ?
Note technique. […] Dans le cas d'un message de statut indiquant la progression d'un processus et matérialisé graphiquement par une barre de progression, un rôle WAI-ARIA progressbar explicite est nécessaire.
Par contre, l'attribut "role" remplace bien la sémantique de la balise sur laquelle il est posé.
Il faudrait donc poser l'attribut "role" sur une balise div intermédiaire entre la balise header et la balise ol (et du coup décaler id et class du header sur cette div je pense)
templates: add aria attributes to steps markup (#40921)