Dernière mise à jour : 12 juin 2026
Le bouton radio permet de sélectionner une seule réponse parmi une liste de deux à six options prédéterminées.
- Guide d'utilisation
- Design
- Accessibilité
Dans cette page
1. Utilisation
Principales règles
Le bouton radio est utilisé en groupe pour présenter deux à six options.
Une seule option parmi toutes celles listées dans un groupe peut être sélectionnée.
Variants possibles
Interactivité
- Le bouton radio et son libellé associé sont cliquables.
- Pour que le choix soit délibéré, aucune option n’est présélectionnée par défaut.
- Lorsqu’une option est sélectionnée, elle ne peut être désélectionnée en recliquant dessus.
- Pour modifier la sélection, une autre option doit être choisie dans le groupe.
- Aucun élément interactif, par exemple une infobulle ou un hyperlien, ne doit être intégré dans un libellé d’option.
2. Quand envisager autre chose
- Pour sélectionner plus d’une option parmi un choix allant jusqu’à six réponses simples et claires, on choisit la case à cocher.
- Lorsqu’une seule option doit être retenue parmi plus de six options courtes et précises, on utilise la liste déroulante.
- Si la réponse est unique à l’utilisateur ou l’utilisatrice ou pour ne pas limiter les options, on se sert du champ texte.
3. Rédaction UX
Règles spécifiques au bouton radio
Libellé principal
Le libellé principal est clair, concis et rédigé dans une forme positive.
Il commence par une majuscule.
- Il ne finit jamais par un deux-points et n’a pas de ponctuation finale.
- S’il s’agit d’une phrase complète ou interrogative, il peut exceptionnellement se terminer par un point ou un point d’interrogation.
Limite de caractères : 100, espaces incluses
Texte d'aide (optionnel)
Le texte d’aide fournit une information complémentaire pour bien comprendre le libellé principal et y répondre correctement.
Il ne comporte pas de limite de caractères, mais il doit être précis et le plus concis possible.
Il utilise un langage simple et inclusif.
Libellé d’option
Le libellé d’option est clair, précis et rédigé dans une forme positive.
Il commence toujours par une majuscule.
Il n’a pas de ponctuation finale.
- S’il s’agit d’une phrase complète, il peut exceptionnellement se terminer par un point.
Tous les libellés d’option d’un même groupe doivent suivre une structure grammaticale commune.
- Par exemple, ce sont tous des noms communs, des verbes à l’infinitif ou de courtes phrases.
Les options sont classées dans un ordre logique, soit du plus courant au moins courant, du plus simple au plus complexe ou par ordre alphabétique.
Limites de caractères :
- Bouton radio – Liste verticale : 75, espaces incluses
- Bouton radio – Liste horizontale : 14, espaces incluses
Texte descriptif (optionnel)
Le texte descriptif vient définir davantage un libellé d’option pour aider à sa compréhension.
Il est clair, précis et concis.
Il utilise un langage simple et inclusif.
Limite de caractères : 185, espaces incluses
Règles générales pour les formulaires
Au-delà des règles propres au composant, il importe aussi de considérer celles qui concernent l’ensemble d’un formulaire.
Éviter les termes techniques, sauf s’ils sont connus par les personnes qui utiliseront le formulaire, par exemple des gens de métier.
Déterminer si la question est obligatoire et l’indiquer en ajoutant un astérisque.
Si une information complémentaire doit être communiquée, tenir compte du contexte pour choisir ce qui convient le mieux entre le texte d’aide et l'infobulle.
1. Bouton radio – Liste verticale
Anatomie
2. Bouton radio – Liste horizontale
Anatomie
3. Astérisque et infobulle
Au niveau du libellé principal, deux éléments peuvent être ajoutés, soit :
- un astérisque (*) pour indiquer une question obligatoire ;
- une infobulle pour fournir une information complémentaire, mais non essentielle pour comprendre la question et y répondre.
Ces éléments peuvent être utilisés simultanément ou séparément selon les besoins d’information à communiquer. Les exemples ci-dessous illustrent leur emplacement pour les variants Liste verticale et Liste horizontale du bouton radio.
4. Texte d’aide et texte descriptif
Le texte d’aide se positionne sous le libellé principal, puisqu’il fournit des informations essentielles pour répondre à la question, par exemple choisir l’option qui correspond le plus à la réalité de l'utilisateur ou l'utilisatrice.
Le texte descriptif, lui, vient se placer sous le libellé d’option, puisqu’il est directement lié à ce dernier en y apportant une explication supplémentaire.
Bouton radio – Liste verticale
Bouton radio – Liste horizontale
Le variant Bouton radio – Liste horizontale présente des options courtes et simples à comprendre. C’est pourquoi l’utilisation de ces deux éléments textuels n'est pas recommandée.
Le texte d’aide est permis, mais plutôt que d’y avoir recours, il vaut mieux revoir le libellé principal pour qu’il soit simple et parlant en soi.
Pour ce qui est du texte descriptif, son utilisation est à éviter. Non seulement les options ne devraient pas avoir besoin d’explication additionnelle, mais l'ajout du texte descriptif vient briser la structure visuelle qui se veut épurée.
5. Message d’erreur
Avec les variants Liste verticale et Liste horizontale du bouton radio, le message d’erreur se place sous le libellé principal. S’il y a un texte d’aide, c’est sous celui-ci qu’on le positionnera.
6. Grille
Quel que soit le variant de bouton radio utilisé, il importe de respecter un certain spectre de longueur de ligne pour assurer une lisibilité optimale. Ces limites sont établies dans le composant selon les points de rupture de chaque taille d’écran.
7. États interactifs
Dépendamment si bouton radio est sélectionné ou non, différents états interactifs sont prévus pour celui-ci et son libellé d’option.
Bouton non sélectionné
Défaut
Survol
Désactivé
Focus
Bouton sélectionné
Sélectionné
Focus
Désactivé
À la navigation au clavier
La navigation au clavier doit permettre de parcourir les boutons radio et d'interagir avec eux de manière prévisible, dans cet ordre :
- Touche Tab. : met le focus sur le premier bouton radio de la liste.
- Barre d’espacement : sélectionne un bouton radio.
- Touches fléchées (droite, gauche, haut et bas) : servent à déplacer la sélection d'un bouton radio à un autre.
- Infobulle (s’il y en a une) : utiliser la touche Entrée ou la barre d’espacement pour l'ouvrir lorsque le bouton qui la contrôle est en focus. Pour la fermer, se servir de la touche Échap. ou du bouton de fermeture « X ». Plus d’informations à ce sujet est disponible dans la page Infobulle.
Avec les lecteurs d’écran
Pour assurer une navigation fluide dans un groupe de boutons radio, les lecteurs d’écran annoncent les éléments suivants :
- Le libellé principal <legend> et la nature du groupe.
- La mention « obligatoire », s’il s’agit d’un champ obligatoire indiqué par un astérisque (*).
- Le bouton qui ouvre une infobulle, s’il y en a une. Voir la page Infobulle pour les règles de lecture détaillées.
- Le texte d’aide, s’il y en a un.
- L'icône « alerte » du message d’erreur, suivie du texte qui y est associé. Pour en savoir plus, consulter la page Visuels décoratifs ou informatifs.
- Le libellé d’option de chaque bouton radio, son état, son texte descriptif et sa position dans le groupe.
Exemple de ce qui doit être annoncé pour un groupe de boutons radio : « Quel type de partenariat vous intéresse ?, obligatoire, groupe. Partenariat commercial, case d’option, non sélectionnée. »
Implémentation (HTML)
Voici comment implémenter les boutons radio pour qu’ils soient facilement navigables au clavier et qu’ils soient correctement annoncés par les lecteurs d’écran.
Groupe de boutons radio
C’est un conteneur <fieldset>. Il contient un libellé principal implémenté dans un <legend>, juste après l'ouverture du <fieldset>.
Le texte d’aide du groupe, si présent, est implémenté juste après le <legend> et est lié par les attributs aria-describedby et id.
Bouton radio
Chaque bouton radio est lié à un libellé visible par l'attribut for, qui correspond à l'identifiant unique id du bouton dans la page.
Si un texte descriptif est nécessaire, il est implémenté juste après le <label> en le liant à l’<input> par les attributs aria-describedby et id.
Pour plus d'informations à ce sujet, se référer à la page Sémantique des descriptions.
Message d'erreur
Lorsqu'une erreur est détectée, le message d'erreur s'affiche juste après le <legend> dans un élément <p> lié par les attributs aria-describedby et id.
Infobulle
L’implémentation de l’infobulle est la même pour tous les composants qui l'intègrent. Pour plus de détails, consulter la page Infobulle.
Comment se comporte un bouton radio accessible ?