Boutons radio
<gcds-radios>

Autres noms : case d’option, groupe radio.

Les boutons radio permettent de proposer plusieurs options de réponse pour un choix unique.

• GitHub
• Figma

Structure du groupe de boutons radio — avec jeu de champs

1. La légende pour les boutons radios agit comme un titre pour identifier les boutons radio groupés. Le texte de la légende est aligné à gauche avec la première lettre en majuscule.
2. Le texte explicatif pour les boutons radios donne des exigences spécifiques pour saisir une réponse appropriée.
3. Le bouton radio indique l'état de la sélection.
4. Le bouton coché indique qu'une option a été sélectionnée.
5. Le étiquette de l'option décrit la sélection. Le texte de l'étiquette porte la majuscule initiale.
6. Le texte explicatif de l'option fournit des renseignements additionnels sur la sélection.

Conception et accessibilité pour le composant boutons radio

Offrir des choix clairs

• Limitez le nombre d'options à 7.
• Limitez le texte de chaque option à quelques mots ou à une phrase courte. Incluez du texte explicatif s'il faut du contexte additionnel.
• Ordonnez les options de manière logique. Par exemple, par ordre alphabétique ou du plus au moins commun.
• Lorsque possible, incluez une option « Aucune de ces réponses » pour éviter de forcer une sélection incorrecte. Une sélection ne peut être désactivée à moins qu'une autre option ne soit sélectionnée.

Fournir des instructions claires

• Expliquez aux utilisateur·rice·s que seule une réponse est acceptée.
• Utilisez le texte explicatif pour indiquer qu'une seule sélection est possible. Par exemple, « Sélectionnez l'option la plus pertinente ».
• Évitez de présélectionner une option radio. Cela augmente le risque qu'une personne saute une question ou soumette une mauvaise réponse.