Groupe de boutons bascule
Utilisation
Présentation
Le groupe de boutons bascule est un élément de contrôle dans lequel l'utilisateur sélectionne une seule option parmi un ensemble de deux à quatre choix qui s'excluent mutuellement. Ce composant se compose de plusieurs boutons bascule, avec un seul bouton actif ou sélectionné à un moment donné.
Pour savoir quand utiliser ce composant en détail, consultez l'arbre de décision des composants de l'interface utilisateur suivant :
Quand l'utiliser
- Lorsque vous présentez aux utilisateurs 2 à 4 options mutuellement exclusives au sein d'un formulaire.
- Pour passer d'une vue à l'autre.
Quand ne pas l'utiliser
- Lorsqu'il y a plus de 4 options parmi lesquelles l'utilisateur peut choisir. Dans ce cas, utilisez la liste déroulante sélectionner ou le combobox.
- Lorsqu'il existe 3 à 4 options dans les expériences mobiles. Dans ce cas, utilisez le ](./radio-group.mdx)groupe de cases d'option[.
- Lorsqu'il n'y a qu'une seule option sélectionnable. Dans ce cas, cochez une seule case.
Formatage
Structure
Le groupe de boutons bascule comprend les éléments suivants :
- Étiquette du groupe : étiquette qui décrit l'objectif du groupe de boutons bascule.
- Bouton bascule : bouton individuel dans le groupe de boutons bascule qui représente une option sélectionnable.
- Étiquette du bouton bascule : étiquette de texte qui décrit l'option associée au bouton bascule.
Mise en page et alignement
Assurez-vous que tous les éléments du bouton bascule ont la même largeur pour maintenir la cohérence et l'importance visuelles.
Meilleures pratiques
Lorsque vous utilisez le groupe de boutons bascule pour passer d'une vue à une autre, l'action de basculement doit opérer immédiatement la modification sans qu'une action supplémentaire ne soit nécessaire.
Contenu
Directives générales relatives à la rédaction
- Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
- Utilisez des verbes au présent et la forme active dans la plupart des cas.
- Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
- Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
- Utilisez des termes et des phrases concis.
Étiquettes
Étiquette de groupe
Bien qu'il ne soit pas strictement obligatoire d'inclure une étiquette de groupe parent, il est vivement recommandé de le faire. Dans les cas où le contexte est suffisant, l'étiquette peut ne pas être définie. Un groupe de boutons bascule sans étiquette visible doit toujours recevoir une étiquette aria avec aria-label ou aria-labelledby. Cette étiquette aria communique la signification collective de toutes les bascules.
Étiquettes des boutons bascule
Les étiquettes des boutons bascule sont obligatoires. Chaque bouton du groupe de boutons bascule doit avoir une étiquette de texte descriptif et clair pour s'assurer que les utilisateurs comprennent les options disponibles. Veillez à ce que les étiquettes restent concises tout en garantissant leur clarté. Privilégiez des étiquettes courtes et descriptives, faciles à lire et à comprendre d'un seul coup d'œil.
Usage des majuscules
Le texte de l'étiquette est en majuscule. Mettez une majuscule à la première lettre du premier mot d'une phrase ou d'une expression, ainsi qu'aux noms propres.
Pour obtenir des instructions supplémentaires sur l'utilisation des majuscules en début de phrase, reportez-vous à la section Capitalisation du guide de style des textes d'interface utilisateur.
Comportements
États
Les boutons bascule se comportent comme des boutons, avec les mêmes états interactifs. Pour en savoir plus, reportez-vous à la documentation du composant Bouton.
Interactions
Souris
Les utilisateurs sélectionnent une option de bouton bascule en cliquant sur le bouton souhaité avec la souris.
Les utilisateurs ne peuvent sélectionner qu'un seul bouton bascule à la fois. Lorsqu'un utilisateur effectue une nouvelle sélection, le choix précédent est automatiquement désélectionné.
Clavier
Chaque bouton est accessible au clavier. Utilisez Tab et Shift+Tab pour naviguer entre les valeurs. Les utilisateurs peuvent sélectionner chaque bouton à l'aide des touches Enter et Spacebar.
Lecteur d'écran
Le groupe de boutons bascule est associé à l'étiquette du groupe à l'aide de l'attribut WAI-ARIA : aria-labelledby. L'attribut aria-pressed bascule entre « true » et « false » pour indiquer l'état de chaque bouton. Cela facilite la tâche des utilisateurs aveugles et malvoyants en les informant de l'objectif du bouton bascule.
Accessibilité
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
- Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
- Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
- Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
- Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Lorsque vous utilisez le composant du groupe de boutons bascule dans votre application :
- Veillez à ce que chaque bouton ait une étiquette claire et concise.
- Si la sélection d'un bouton bascule entraîne un changement dans le contexte, les utilisateurs doivent en être avertis.