Bouton radio

Mots-clés

• Bouton radio : Un élément d’interface permettant de sélectionner une seule option parmi un ensemble de choix mutuellement exclusifs.
• Formulaire : Une section d'une page web destinée à la saisie et à la sélection d’informations par l’utilisateur.
• ARIA : Des attributs destinés à améliorer l’accessibilité des contenus web.
• Fieldset : Permet de regrouper des éléments liés au sein d’un formulaire.
• Label : Décrit la fonction d’un élément de formulaire, comme un bouton radio.

Détail des composants

Étiquetage et association

• Élément bouton radio : Élément essentiel pour la sélection utilisateur, chaque bouton radio partage un même attribut name tout en conservant un identifiant (id) distinct permettant son étiquetage individuel.

Regroupement et fieldset

• Fieldset et Legend : Utilisés pour regrouper logiquement des boutons radio, avec le fieldset qui englobe l’ensemble, et le legend qui fournit un titre ou une description générale du groupe.

Indication d’état – Boutons radio personnalisés

• Attributs ARIA : Essentiels pour les utilisateurs de lecteurs d’écran. Des attributs comme aria-checked indiquent l’état de sélection, tandis que role="radio" décrit correctement la fonction de l’élément.
• Navigation clavier : Assure la navigabilité au clavier des boutons radio, en permettant le contrôle du focus grâce à tabindex="0" et l’interaction via des événements clavier gérés en JavaScript.

Gestion des erreurs et retours utilisateur

• Mettre en place des mécanismes de retour clairs et immédiats pour la gestion des erreurs, afin de guider les utilisateurs dans la correction de leurs choix grâce à des indices visuels ou des messages d’erreur explicites.

Directives de test

• Pour réaliser efficacement des tests de conformité accessibilité, il est essentiel de prioriser la navigation au clavier et d’utiliser un lecteur d’écran afin de vérifier le respect des normes d’accessibilité.

Aperçu du code

Bouton radio natif

1. Chaque bouton radio est associé à un élément <label> grâce à l’attribut for du label, relié à un id identique sur l’élément <input>. Cela garantit que les lecteurs d’écran annoncent correctement le libellé correspondant.
2. Les boutons radio doivent être placés dans un élément <fieldset>, qui contient un libellé descriptif fourni par l’élément <legend>. Ce regroupement et ce libellé permettent d’organiser les options et de clarifier leur objectif.
3. Les boutons radio input type="radio" sont intrinsèquement accessibles au clavier. Ils affichent l’indication de focus par défaut du navigateur ou peuvent être personnalisés via CSS pour offrir une indication de focus visible.

Bouton radio personnalisé

Lors de la création de boutons radio personnalisés, toutes les fonctionnalités d’accessibilité héritées de input type="radio" et du fieldset doivent être ajoutées manuellement, soit via des attributs ARIA, soit via du JavaScript.

Regroupement et légende

• Entourer chaque bouton radio personnalisé dans des éléments de liste (<li>) organisés au sein d’une liste non ordonnée (<ul>).
• Ajouter role="radiogroup" à l’élément <ul> afin que la liste soit reconnue comme un groupe de boutons radio.
• Ajouter un identifiant unique (id) au <legend> du groupe de boutons radio, puis ajouter un attribut aria-labelledby sur l’élément <ul> contenant l’ID du <legend>. Cela garantit qu’un lecteur d’écran annoncera la légende lorsque le focus arrive sur le premier bouton radio.
• Inclure l’attribut aria-activedescendant sur l’élément <ul> et lui attribuer l’ID du bouton radio visuellement sélectionné. Cet attribut indique aux technologies d’assistance quel bouton radio est actuellement actif (sélectionné) dans le groupe.

Boutons radio

• Transformer chaque <li> en bouton radio en ajoutant role="radio" à l’élément. Cela garantit une sémantique claire et une accessibilité correcte pour les lecteurs d’écran.
• Veiller à ce que chaque <li> contienne l’attribut aria-checked.
  Définir sa valeur à true pour le bouton radio sélectionné et à false pour tous les autres. Il est crucial qu’un unique bouton radio au sein du groupe ait aria-checked="true". Cet attribut informe les technologies d’assistance de l’état de sélection de chaque bouton radio.
• Inclure tabindex="0" sur tous les boutons radio (éléments <li>).
  Cela leur permet d’être inclus dans l’ordre de tabulation et d’être accessibles à la navigation au clavier. Cet attribut garantit que l’utilisateur peut interagir au clavier avec les boutons radio personnalisés.

Interactions clavier

• Toutes les interactions clavier pour un bouton radio personnalisé doivent être gérées en JavaScript. Consultez l’onglet “Navigation au clavier” pour voir l’ensemble des interactions prises en charge.

Accessibilité pour les lecteurs d’écran

• Étiquetage clair : Chaque bouton radio doit être étiqueté pour les lecteurs d’écran à l’aide de l’attribut for.
• Contexte de groupe : Les balises <fieldset> et <legend> fournissent un contexte pour un ensemble de boutons radio, ce qui facilite la compréhension pour les utilisateurs de lecteurs d’écran.
• Navigation au clavier : Les boutons radio doivent pouvoir être parcourus et sélectionnés via le clavier.
• Communication de l’état : Les lecteurs d’écran annoncent l’état sélectionné lorsqu’un bouton radio reçoit le focus.
• HTML sémantique : L’utilisation des balises HTML standard (input, label, fieldset, legend) garantit un support d’accessibilité natif.