Boutons radio

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular

<cpc-ds-radio-button 
            *ngFor="let country of countries; let i=index" 
            formArrayName="selectedCountries" 
            id="country_radio_{{i}}" 
            name="country_radio" 
            [text]="country.name" 
            [value]="country.value" 
            
            [disabled]="(i === 3) ? true : false" 
            (change)="onCheckboxChange($event)">

</cpc-ds-radio-button> 

HTML

<script src="[JS-PLACE-HOLDER]"></script> 

<div role="radiogroup" aria-labelledby="radio-names">
                    <p class="radio" id="radio-names">Select a radio:</p>
                    <div class="checkbox-container">
                        <input class="by-keyboard" checked id="one" name="radio" type="radio">
                        <label for="one">A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog.</label>
                    </div>

                    <div class="checkbox-container">
                        <input class="by-keyboard" id="two" name="radio" type="radio">
                        <label for="two">Radio button item 2</label>
                    </div>

                    <div class="checkbox-container">
                        <input class="by-keyboard" id="three" name="radio" type="radio">
                        <label for="three">Radio button item 3</label>
                    </div>

                    <div aria-disabled="true" class="checkbox-container disabled">
                        <input class="by-keyboard" disabled id="dis" name="radio" type="radio">
                        <label for="dis">Radio disabled</label>
                    </div>

</div>

<div role="radiogroup" aria-labelledby="radio-disabled-names">
                    <p class="radio" id="radio-disabled-names">Disabled radio:</p>
                    <div aria-disabled="true" class="checkbox-container disabled">
                        <input disabled class="by-keyboard" id="dis" name="radio2" type="radio" checked="checked">
                        <label for="dis">Radio button item 1</label>
                    </div>
                    <div aria-disabled="true" class="checkbox-container disabled">
                        <input disabled class="by-keyboard" id="dis2" name="radio2" type="radio">
                        <label for="dis2">Radio button item 1</label>
                    </div>
  </div>

Lignes directrices générales

Les boutons radio permettent aux utilisateurs de choisir une option parmi un groupe d’options connexes.

Ces choix s’excluent mutuellement, ce qui signifie que l’utilisateur ne peut pas sélectionner plus d’une option.

Si vous souhaitez que les utilisateurs puissent sélectionner plus d’une option, prévoyez des cases à cocher.

Les boutons radio sont tout indiqués pour permettre aux utilisateurs de faire une sélection rapidement et facilement parmi une gamme d’options.

Interaction

Les utilisateurs ne peuvent sélectionner qu’un seul bouton radio. S’ils en choisissent un autre, le bouton sélectionné précédemment est automatiquement désélectionné.

Au moyen de claviers et de technologies d’assistance, les utilisateurs naviguent jusqu’à un groupe de boutons radio à l’aide de la touche de tabulation et sélectionnent une option à l’aide des touches des flèches.

États

1. Non sélectionné :
   Dans cet état, le bouton radio est vide. Il faut cliquer dessus pour le sélectionner.
2. Sélectionné :
   Un seul bouton radio peut être sélectionné.
3. Mise en évidence :
   dans cet état, une case à cocher se trouve dans un encadré bleu et peut être activée au moyen de la barre d’espacement.
4. Désactivé :
   Dans l’état désactivé, un menu déroulant est visible, mais il est impossible de l’utiliser. Les couleurs pâles permettent de distinguer les menus déroulants désactivés des menus déroulants activés.

Facteurs à prendre en compte en matière d’accessibilité

Au moyen d’une souris, les boutons radio s’activent lorsqu’un utilisateur clique sur l’icône ou son étiquette.

Au moyen d’un clavier ou d’une technologie d’aide, les utilisateurs peuvent naviguer jusqu’à un groupe de boutons radio à l’aide de la touche de tabulation et sélectionner une option à l’aide des touches de direction.

Vérifiez qu’il y a suffisamment d’espace vertical entre les boutons radio pour éviter les erreurs de sélection.

Employez le jeu de champs des balises HTML et la légende pour forcer le retour à la ligne des groupes de boutons radio. Ces balises aident les technologies d’assistance à interpréter vos regroupements de façon à ce que les utilisateurs puissent facilement naviguer.

Utilisez les en-têtes pour donner un titre aux regroupements de boutons radio. Si votre en-tête est identique à votre légende, dissimulez-la à la vue afin qu’elle soit lue uniquement par des lecteurs d’écran.

Message d’erreur

Lorsqu’il y a un message d’erreur, il doit s’afficher sous le dernier élément du bouton radio.

Spécifications du design

Lignes directrices générales

Les boutons radio doivent être clairement étiquetés afin d’éviter toute confusion lors du choix d’une option. Créez des étiquettes claires, concises et complètes avec une majuscule en début de phrase. Expliquez clairement ce qui se produira si une sélection mène à une action ou à un changement spécifique.

• Un bouton radio doit appartenir à un groupe de deux options ou plus.
• Les boutons radio doivent être groupés en établissant le « nom » de tous les éléments associés.
• Un bouton radio doit être accompagné d’une étiquette ayant une valeur descriptive.
• Cliquer sur l’étiquette doit également permettre de sélectionner le bouton radio associé.

Lignes directrices

Interaction avec le clavier

Lorsqu’un bouton d’un groupe de boutons radio est mis en évidence

• Barre d’espacement : Coche le bouton radio si ce n’est pas déjà fait.
• Flèche vers le haut ou vers la gauche : Met en évidence le bouton radio précédent dans le groupe de boutons radio et le coche. Si le bouton radio actuellement mis en évidence est le premier du groupe, le dernier bouton sera alors mis en évidence.
• Flèche vers le bas ou vers la droite : Met en évidence le bouton radio suivant dans le groupe de boutons radio et le coche. Si le bouton radio actuellement mis en évidence est le dernier du groupe, le premier bouton sera alors mis en évidence.
• Touche de tabulation : La mise en évidence n’est plus dans le groupe de boutons radio et passe au prochain élément de la page qui peut l’être.
• Touches « Maj + Tab » : La mise en évidence n’est plus dans le groupe de boutons radio et passe à l’élément précédent de la page qui peut l’être.

Lorsque l’élément mis en évidence précède le groupe de boutons radio sur la page

• Touche de tabulation : la mise en évidence passe dans le groupe de boutons radio.
  • Si aucun des boutons radio n’est coché, le premier bouton du groupe est mis en évidence et demeure non coché.
  • Si un bouton radio est coché, il sera mis en évidence.

Lorsque l’élément mis en évidence suit le groupe de boutons radio sur la page

• Touches « Maj + Tab » : la mise en évidence passe dans le groupe de boutons radio.
  • Si aucun des boutons radio du groupe n’est coché, le dernier bouton du groupe est mis en évidence et demeure non coché.
  • Si un bouton radio est coché, il sera mis en évidence.

Propriétés ARIA

Le composant du bouton radio peut avoir les propriétés ARIA suivantes :

• Le rôle d’une « radio ». Il n’est pas nécessaire d’ajouter l’attribut du rôle si vous utilisez la formule native <input type=”radio”/>.
• Chaque groupe de boutons radio joue le rôle « radiogroup ».
• Chaque bouton radio est identifié selon son contenu (étiquette).
• Propriété de l’indication d’état, propriété ARIA cochée, réglée à « true » lorsque cochée et réglée à « false » lorsque non cochée
• L’étiquette de groupe et le groupe de messages d’erreur sont associés au groupe de boutons radio à l’aide de la propriété « aria-labelledby ». Cette propriété utilise ID de l’étiquette de groupe et le groupe de messages d’erreur comme renseignements.

Test

Lorsqu’il teste un bouton radio, le testeur doit s’assurer de ce qui suit :

• Est entièrement accessible au moyen du clavier.
• Les indications concernant les états de survol et de mise en évidence sont claires et bien en vue.
• Le changement d’état (coché et non coché) est clair et ne dépend pas uniquement de la couleur.
• Les boutons radio sont groupés, et un seul d’entre eux peut être sélectionné à la fois.
• Un bouton radio joue le rôle d’une « radio ».
• Le lecteur d’écran annonce l’étiquette du bouton radio, son rôle et son état (coché ou non coché).
• Le lecteur d’écran annonce l’étiquette du groupe de boutons radio et le message d’erreur (le cas échéant) au moment d’entrer dans le groupe.

Contenu connexe

• Menus déroulants
• Cases à cocher