Development #73116
accessibilité pour les zones dé/pliables de la page d'une demande
0%
Description
Le composant d’accordéon ne respecte le motif de conception, le composant qui permet d’activer l’ouverture ou la fermeture des panneaux doit être un bouton, et celui-ci doit se trouver à l’intérieur du titre et non l’inverse.
De plus, il manque également la présence de l’attribut aria-controls sur le bouton qui permet d’indiquer quel est le panneau contrôlé. La présence de l’attribut aria-expanded n’est pas nécessaire du fait de la présence de l’attribut title qui indique déjà l’état.
(je ne suis pas bien sûr de la partie où ça parle d'un attribut title, qui n'existe pas sur la page en question, mais ça peut a priori être ignoré et aria-expanded implémenté).
Demandes liées
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a plus d'un an
- Lié à Development #73802: style bouton accordéon transparent pour dé/pliage de section ajouté
Mis à jour par Robot Gitea il y a plus d'un an
- Statut changé de Nouveau à Solution proposée
Frédéric Péters (fpeters) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://gitea.entrouvert.org/entrouvert/wcs/pulls/61
- Titre : a11y: add accordion pattern to form view sections (#73116)
- Modifications : https://gitea.entrouvert.org/entrouvert/wcs/pulls/61/files
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
Pourquoi ajouter un tag button ? Cela complique tout : le JS, le CSS.
Je suis partisan d'ajouter simplement un attribut `role="button"` au h2
Mis à jour par Frédéric Péters il y a environ un an
Pourquoi ajouter un tag button ? Cela complique tout : le JS, le CSS.
Ça correspond à ce que note l'audit "le composant qui permet d’activer l’ouverture ou la fermeture des panneaux doit être un bouton, et celui-ci doit se trouver à l’intérieur du titre"; aussi ça assure des interactions au clavier qui sont totalement standard.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
expliquer ce qu'on va faire différemment etc.
Pourquoi ?
Dans l'audit il est dit :
Motif de conception ARIA button : lorsqu’il n’est pas possible d’utiliser un élément
<button>, ARIA fournit un motif de conception button :
L’élément doit avoir un attribut role="button".
L’événement doit se déclencher sur le clic de souris, la touche Entrée et la touche
Espace.
Si l’élément ne peut pas recevoir le focus de tabulation, l’élément doit posséder une
propriété tabindex="0" pour le rendre opérable au clavier.
Et dans la page détaillant le motif de conception on peut y lire
The title of each accordion header is contained in an element with role button.
Conclusion, a accessibilité <button> et role="button" c'est kif kif d'un point de vue sémantique.
Donc on est bien libre de proposer ce qui est le plus pertinent avec notre existant.
Ma proposition est juste d'utiliser ce que tu as fait pour les cellules foldable.
Ce qui me dérange aussi dans ce lot de patch c'est le CSS pour générer un bouton "unset".
J'ai l'impression qu'utiliser un role="button" nous évite des contorsions CSS.
Après en effet, ce qui change par rapport au travail sur les cellules foldable et que je n'avais pas relevé c'est : "le bouton doit être au sein du h2".
Je comprends qu'utiliser un bouton assure des interactions au clavier qui sont totalement standard par défaut.
Mais là encore la function Js combo prepare_foldable fait déjà le job
Je suis donc partisan d'utiliser l'existant pour combo.
Enfin ce point ne semble pas être traité dans le patch :
The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution proposée à Solution validée
Thomas Jund (tjund) a approuvé une pull request sur Gitea concernant cette demande :
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution validée à Résolu (à déployer)
Frédéric Péters (fpeters) a mergé une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/wcs/pulls/61
- Titre : a11y: add accordion pattern to form view sections (#73116)
- Modifications : https://git.entrouvert.org/entrouvert/wcs/pulls/61/files
Mis à jour par Transition automatique il y a environ un an
- Statut changé de Résolu (à déployer) à Solution déployée
Mis à jour par Frédéric Péters il y a 12 mois
- Lié à Development #40885: [RGAA] Enchaînement de plusieurs zones affichées/masquées ajouté
Mis à jour par Frédéric Péters il y a 12 mois
- Lié à Development #71070: [RGAA] Lien "Résumé (afficher le détail de la demande)" ajouté
a11y: add accordion pattern to form view sections (#73116)