Boutons radio Dans un formulaire, les boutons radio sont utilisés lorsque l’utilisateur doit faire un seul choix parmi une liste d’options. Exemples Les exemples ci-dessous reproduisent les variantes des boutons radio, en incluant celle avec une consigne et celle avec une aide à la saisie. Les champs en erreur peuvent être vus en laissant vide les boutons et en cliquant sur Suivant. Étiquette de groupe de champs Choix A Choix B Choix C Étiquette de groupe de champs (facultatif) Texte d’aide à la saisie Choix A Choix B Choix C Exemple avec 2 options Lorsque deux options sont des mots très court, les boutons radio peuvent être positionnés côte à côte. Oui Non Exemple avec option autres Texte pour consigne Choix A Choix B Choix C Autres Veuillez préciser Laisser ce champ vide Accessibilité Style La bordure du bouton radio doit avoir un taux de contraste de 3:1 avec l’arrière-plan, tant pour l’état sélectionné que non-sélectionné. Champ unitaire L’étiquette du bouton radio doit être à proximité du bouton radioL’étiquette du bouton radio doit être codée dans une balise <label>La balise <label> doit être liée au bouton radio Groupe de boutons radio Une balise <fieldset> contient l’étiquette de groupe de champs et tous les boutons radioL’étiquette de groupe de champs doit être codée dans une balise <legend>La balise <legend> doit être le premier enfant de la balise <fieldset>La sélection d’un bouton radio ne doit jamais déclencher une action qui déplacerait le focus (vers une fenêtre modale, par exemple) ou naviguerait vers une autre page. Information complémentaire au champ Ne pas oublier que tout texte apportant de l’information complémentaire aux boutons radio (un signe de $, une consigne, le message d’erreur) doit y être lié. Pour ce faire, il faut : Ajouter l’attribut aria-describedby sur le bouton radioAjouter l’attribut id sur la balise contenant le texte (<p>, <span>, <div>)Lier l’attribut aria-describedby à l’attribut id (aria-describedby="id du texte") Il est très important, dans le cas d’une information liée au groupe de boutons de radio, d’ajouter l’attribut aria-describedby sur la balise <fieldset>, car l’information est liée au groupe et non à un champ.
