Development #62750
accessibilité, "grouper" les boutons radios ou cases à cocher
0%
Description
D'un audit,
La spécification HTML 5 propose une structure pour gérer ces regroupements qui utilise une balise <fieldset> et une balise <legend> sur le modèle suivant :
<fieldset>
<legend>Voulez-vous vous inscrire à la newsletter ?</legend>
<input id="id-oui" type="radio" /><label for="id-oui">Oui</label>
<input id="id-non" ype="radio" /><label for="id-non">Non</label>
</fieldset>
Pas la première fois et ça va créer de la différence de balisage entre champs (puisqu'on ne va pas taper individuellement tous les champs dans un <fieldset>), mais on peut tenter.
Fichiers
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a environ 2 ans
- Fichier 0005-a11y-put-radio-checkboxes-groups-in-fieldset-tags-62.patch 0005-a11y-put-radio-checkboxes-groups-in-fieldset-tags-62.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Mis à jour par Frédéric Péters il y a environ 2 ans
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
Je déconseille l'utilisation des balises fieldset + legend.
C'est un enfer à styler, on va s'en mordre les doigts : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Fieldset#mise_en_forme_avec_css
Je préconise l'utilisation de l'attribut `role="group"` couplé à `aria-labelledby` pour pointer la balise .title servant de legend et ainsi pour créer un équivalent accessible.
(et bienvenue aux groupes de champs !)
Mis à jour par Frédéric Péters il y a environ 2 ans
Oui l'idée ici dans le patch est de ne pas styler du tout via <fieldset>, juste en faire disparaitre les aspects visuels, mais les mettre parce que de rapport en rapport c'est demandé pour les boutons radio.
.fieldset-widget {
border: none;
padding: 0;
margin: 0;
}
Je préconise l'utilisation de l'attribut `role="group"` couplé à `aria-labelledby` pour pointer la balise .title servant de legend et ainsi pour créer un équivalent accessible.
Je ne vais pas me lancer dans un truc pas validé par auditeur et cie, et blindé à ce niveau. Si tu veux participer (#62508#note-9), ou formuler ta question pour qu'elle leur soit posée, go for it.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
Dans le rapport il est indiqué :
<fieldset> <legend>Voulez-vous vous inscrire à la newsletter ?</legend> <input id="id-oui" type="radio" /><label for="id-oui">Oui</label> <input id="id-non" type="radio" /><label for="id-non">Non</label> </fieldset>
Si ce n’est pas possible, l’utilisation de propriétés ARIA peut aboutir au même résultat :
<div role="group" aria-labelledby="id-legend"> <p id="id-legend">Voulez-vous vous inscrire à la newsletter ?</p> <input id="id-oui" type="radio" /><label for="id-oui">Oui</label> <input id="id-non" type="radio" /><label for="id-non">Non</label> </div>
Et c'est vraiment la seconde version à privilégier à mon avis (Le solution est préconisée p28 du rapport).
Mis à jour par Frédéric Péters il y a environ 2 ans
- Fichier 0001-a11y-add-role-and-aria-labelledby-attributes-to-radi.patch 0001-a11y-add-role-and-aria-labelledby-attributes-to-radi.patch ajouté
- Sujet changé de accessibilité, taper les boutons radios ou cases à cocher dans un <fieldset> à accessibilité, "grouper" les boutons radios ou cases à cocher
Alors la version simple, qui ajoute donc role="group" et aria-labelledby="..." sur le <div>.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
Je ne pense pas que l'on puisse conserver <label> comme titre de groupe. Il me semble qu'un label doit forcement être relié à un élément de saisi.
Mis à jour par Frédéric Péters il y a environ 2 ans
Il me semble qu'un label doit forcement être relié à un élément de saisie.
Je lis juste "Il peut être associé à un contrôle", pas d'obligation mentionnée sur https://developer.mozilla.org/fr/docs/Web/HTML/Element/label
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans
- Statut changé de Solution proposée à Solution validée
OK, Le validateur HTML reste muet.
Mis à jour par Frédéric Péters il y a environ 2 ans
(ok pour info j'ai posé la question lors du retour d'audit, pas de réponse immédiate donnée mais on devrait avoir un retour).
Mis à jour par Frédéric Péters il y a presque 2 ans
- Statut changé de Solution validée à Résolu (à déployer)
(poussé le 3 mai oublié)
commit 4b35705c8d488de6eda793f9435494b0bd07f167
Author: Frédéric Péters <fpeters@entrouvert.com>
Date: Tue Mar 15 12:17:46 2022 +0100
a11y: add role and aria-labelledby attributes to radio/checkboxes (#62750)
Mis à jour par Transition automatique il y a presque 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
a11y: add role and aria-labelledby attributes to radio/checkboxes (#62750)