Development #41128
Accessibilité : Ordre de tabulation sur les demandes paginées
0%
Description
L'ordre de tabulation n'est pas correcte lorsqu'on utilise les systèmes de pagination.
Lorsqu'on clique sur les boutons de pagination, le contenu précédent (la liste des brouillons en cours par exemple) est rechargé mais le focus reste au même emplacement. Cela nécessite donc à l'utilisation de revenir en arrière dans la page ce qui n'est pas cohérent.
Correction
Lorsque le contenu est rechargé, il faut déplacer le focus sur le premier élément atteignable au clavier du nouveau contenu affiché.
Files
Related issues
Associated revisions
History
Updated by Marie Kuntz (absente) almost 3 years ago
- Related to Development #36305: Améliorer l'accessibilité (RGAA) des thèmes added
Updated by Agate Berriot 5 months ago
- File 0001-accessibility-replace-focus-at-the-beginning-of-list.patch 0001-accessibility-replace-focus-at-the-beginning-of-list.patch added
- Status changed from Nouveau to Solution proposée
- Patch proposed changed from No to Yes
Updated by Agate Berriot 5 months ago
- File Peek 2022-08-18 10-56.mp4 Peek 2022-08-18 10-56.mp4 added
- Assignee changed from Agate Berriot to Benjamin Dauvergne
Cf la vidéo jointe pour une idée du rendu
Updated by Thomas Jund 5 months ago
Il ne serait pas suffisant de simplement ajouter un attribut tabIndex="-1" sur la div.links-list et de lui donner le focus à chaque click sur un bouton de navigation ?
Updated by Agate Berriot 5 months ago
Thomas Jund a écrit :
Il ne serait pas suffisant de simplement ajouter un attribut tabIndex="-1" sur la div.links-list et de lui donner le focus à chaque click sur un bouton de navigation ?
Effectivement, ça fait un patch plus léger, avec un focus potentiellement inutile sur la div parente, mais je ne pense pas que ça soit un problème :)
Updated by Thomas Jund 5 months ago
- Status changed from Solution proposée to Solution validée
avec un focus potentiellement inutile sur la div parente
Si on souhaite vraiment que ce widjet soit accessible (et pas juste cocher une case dans un rapport d'accessibilité), il faudrait que les boutons aient des labels explicites (genre "liste des brouillons page 3") et que la 'div parent' qui reçoit le focus ait un label de rappel "page 3" qui serve de feedback pour indiquer que le click que le bouton a fonctioné. Mettre un focus "inutile" sur le parent permettra par la suite de lui associé un label (soi via aria-labelledby, soit via un titre, etc.), donc pas si inutile que ça à mon avis.
Updated by Agate Berriot 5 months ago
Thomas Jund a écrit :
avec un focus potentiellement inutile sur la div parente
Si on souhaite vraiment que ce widjet soit accessible (et pas juste cocher une case dans un rapport d'accessibilité), il faudrait que les boutons aient des labels explicites (genre "liste des brouillons page 3") et que la 'div parent' qui reçoit le focus ait un label de rappel "page 3" qui serve de feedback pour indiquer que le click que le bouton a fonctioné. Mettre un focus "inutile" sur le parent permettra par la suite de lui associé un label (soi via aria-labelledby, soit via un titre, etc.), donc pas si inutile que ça à mon avis.
Tu as raison. Je crée un ticket séparé pour ça.
Updated by Agate Berriot 5 months ago
- Precedes Development #68485: Améliorer l'accessibilité de la pagination added
Updated by Agate Berriot 5 months ago
- Status changed from Solution validée to Résolu (à déployer)
commit d6e716a56c50c08b55ad3501df3f39612edeeb15
Author: Agate Berriot <aberriot@entrouvert.com>
Date: Mon Aug 29 09:57:30 2022 +0200
accessibility: replace focus at the beginning of list on pagination change (#41128)Updated by Transition automatique 5 months ago
- Status changed from Résolu (à déployer) to Solution déployée
Updated by Agate Berriot 5 months ago
- Has duplicate Development #43745: [RGAA][A] Les boutons permettant de changer de page mettent à jour un contenu qui les précèdent. added
accessibility: replace focus at the beginning of list on pagination change (#41128)