Radio-buttons (Boutons-radio)

Les boutons radio affichent un ensemble d’options parmi lesquelles l’utilisateur ne peut en sélectionner qu’une seule. Ils sont le plus souvent utilisées dans des formulaires.

Usage

• Les boutons radio permettent de choisir entre deux à cinq options, par exemple une civilité.
• L’utilisateur peut sélectionner une seule des options à la fois.
• La sélection des boutons radio s’exclut mutuellement. Dans une liste, si l’un des boutons radio est activé, tous les autres sont désactivés.

Bonnes pratiques

• La 1^re lettre du texte est en majuscule, le reste est en minuscule.
• N’utilisez pas de point à la fin du texte.
• Le texte doit décrire le choix de manière claire et distincte.
• Afficher les options dans un ordre logique, par ex. : les plus susceptibles d’être sélectionnées en premier.
• Lorsque l’espace est suffisant et que la lisibilité est optimale, les boutons radio sont disposés horizontalement.
• Par défaut, les boutons radio peuvent être désactivés ou bien activés. Cependant, il est préférable d’activer une des options, la plus probable ou la première.
• Si un état non sélectionné est nécessaire, ajoutez simplement un bouton radio “Aucun”.
• L’indicateur de groupe (composant Label) qui accompagne des boutons radio n’est pas obligatoire, ex. : civilité.
• Ne pas utilisez de boutons radio pour activer ou désactiver en tant que tel des éléments. Le composant Switch (interrupteur) est plus approprié.

Style & code

Il y a 2 façons d’écrire un bouton radio en HTML :

• Méthode 1 : <input> PUIS <label>
• Méthode 2 : <input> DANS <label>

Toutefois, pour gérer l’affichage en colonne d’une suite de boutons-radio, ou le placement de texte entre ces boutons-radio la seconde méthode s'impose. Par conséquent, SipaUI ne permettra que la seconde méthode.

Standard

La classe su-radio-area est nécessaire pour encadrer la zone de boutons-radio. Dans un site utilisant SipaUI, les balises <input type="radio"> et <label> s'affichent comme attendu. Toutefois, il est possible de forcer l’affichage charté avec les classes su-input-radio sur l’input et su-label-radio sur le label.

Sur une ligne, basique

<div class="su-radio-area">
    <label for="radio1"><input type="radio" id="radio1" name="nom1" value="Valeur 1" checked>Valeur 1</label>
    <label for="radio2"><input type="radio" id="radio2" name="nom1" value="Valeur 2">Valeur 2</label>
</div>

Sur une ligne, avec du texte entre les boutons-radio

<div class="su-radio-area">
    <label for="radio3"><input type="radio" id="radio3" name="nom2" value="Valeur 1" checked>Valeur 1</label>
    <span>ou</span>
    <label for="radio4"><input type="radio" id="radio4" name="nom2" value="Valeur 2">Valeur 2</label>
</div>

Sur une ligne, inactif

Mettre la classe su-disabled sur su-radio-area et la valeur disabled sur l’input.

<div class="su-radio-area su-disabled">
    <label for="radio5"><input type="radio" id="radio5" name="nom3" value="Valeur 1" checked disabled aria-readonly="true">Valeur 1</label>
    <span>ou</span>
    <label for="radio6"><input type="radio" id="radio6" name="nom3" value="Valeur 2" disabled aria-readonly="true">Valeur 2</label>
</div>

En colonne

Pour positionner les choix en colonnes il faut impérativement prendre la méthode 2 et ajouter la classe su-radio-column sur le parent.

<div class="su-radio-area su-radio-column">
    <label for="radio7"><input type="radio" id="radio7" name="nom4" value="Valeur 1" checked>Valeur 1</label>
    <label for="radio8"><input type="radio" id="radio8" name="nom4" value="Valeur 2">Valeur 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</label>
</div>

Gestion des erreurs

Sur une ligne, basique

<div class="su-error">
    <div class="su-radio-area">
        <label for="radio9"><input type="radio" id="radio9" name="nom5" value="Valeur 1">Valeur 1</label>
        <label for="radio10"><input type="radio" id="radio10" name="nom5" value="Valeur 2">Valeur 2</label>
    </div>
    <div class="su-error-message">Message d’erreur</div>
</div>

En colonne

<div class="su-error">
    <div class="su-radio-area su-radio-column">
        <label for="radio11"><input type="radio" id="radio11" name="nom6" value="Valeur 1">Valeur 1</label>
        <label for="radio12"><input type="radio" id="radio12" name="nom6" value="Valeur 2">Valeur 2</label>
    </div>
    <div class="su-error-message">Message d’erreur</div>
</div>

Accessibilité

Les boutons radios sont généralement groupés et liés à un choix multiple pour une question, un sujet… Dans ce cas le design permet de faire visuellement cette association. Toutefois, pour les rendre plus accessibles aux handicapés visuels, il faut les associer aussi au niveau du DOM avec l’attribut aria-labelledby :

<div id="radio_label" class="su-label">Choix unique</div>
<div class="su-radio-area su-radio-column" aria-labelledby="radio_label">
    <label for="radio13"><input type="radio" id="radio13" name="nom7" value="Valeur 1" checked>Valeur 1</label>
    <label for="radio14"><input type="radio" id="radio14" name="nom7" value="Valeur 2">Valeur 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</label>
</div>

Pour les boutons radios inactifs, il y a l’attribut aria-readonly="true" à positionner sur l’input (cf. « Sur une ligne, inactif » ci-dessus).