Rechercher
ContactOrdre des boutons radio et de leurs intitulés (accessibilité)
Quel ordre pour les boutons radio et leurs intitulés (étiquettes) choisir du point de vue de l'accessibilité ? Faut-il mettre les étiquettes avant les boutons radio ou après ceux-ci ? Réponse à cette question de ma FAQ/base de connaissance accessibilité Web personnelle tirée de la liste de discussion des experts du Groupe de Travail Accessiweb et de celle d'Accesstech.
Ma question était la suivante :
"J'ai retrouvé trace d'une recommandation, qui nous avait été faite en formation EAE en 2007, dans le (feu-) Guide AccessiWeb version 1.3 (Guide AccessiWeb dont je regrette, d'ailleurs, la non reconduction, car très utile par ses compléments, ses illustrations et sa pédagogie).
Elle concerne l'ordre d'apparition des boutons radio et de leurs intitulés dans une page.
Cette recommandation était donnée non pas dans les paragraphes sur les critères, leur évaluation ou leur mise en œuvre, mais dans un paragraphe "illustration" à la fin de la fiche (pour le critère : "Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ?").
Cependant, elle conseillait clairement que les étiquettes des boutons radio soient placées avant les boutons radio eux-mêmes, afin que "les personnes qui lisent la page de manière linéaire [puissent] savoir à quoi est associé chaque bouton-radio".
Je souhaitais savoir si cette recommandation était toujours pertinente, car une utilisatrice m'a répondu face à cet argument que des internautes risquaient d'être déroutés par la présentation (loin d'être habituelle), voire de se tromper en remplissant un formulaire où des boutons radio et leurs étiquettes sont placés sur une même ligne afin de gagner de la hauteur."
Réponse de Victor :
"Une telle préconisation n'a, selon moi, aucun fondement solide, d'autant moins que l'association input[id="mon-id"][type="radio"] / label[for="mon-id"] permet, justement, de savoir à quelle étiquette correspond tel bouton radio, même quand ce dernier apparaît en premier dans le code source."
Complément de Olivier :
"Même si le fait de placer le bouton avant le label a plusieurs avantages en termes de lisibilité, ce n'est pas un problème d'accessibilité mais d'ergonomie (pas d'impact pour les utilisateurs de technos d'assistance, même si impact possible sur l'expérience utilisateur "pour tout le monde".) D'où le fait, je suppose, que cette préconisation a disparu du référentiel actuel."
Et, enfin, le complément de Patrice :
"Les indications données dans la section "Description" et dans la procédure de test de la technique WCAG H44 recommandent que pour les boutons radio et les cases à cocher, le label soit placé après"
En conclusion, la bonne pratique consiste donc à placer les étiquettes après les boutons radio dans les formulaires, même si à une époque donnée, il a été préconisé l'inverse par BrailleNet/AccessiWeb.
Pour en savoir plus, les détails des discussions complètes sur le sujet :