Bouton à bascule
Utilisation
Présentation
Un commutateur est un composant alternant entre deux états possibles : actif et inactif. Le commutateur est utilisé pour les options globales, par exemple dans les pages de paramètres lorsque l'utilisateur doit activer ou désactiver quelque chose.
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
Pour faire basculer l'état d'une application entre deux options telles que marche/arrêt et actif/inactif. Veillez à ce que l'effet soit appliqué immédiatement aux commutateurs et ne nécessite pas d'action supplémentaire.
Quand ne pas l'utiliser
- Pour une sélection true/false dans un formulaire. Utilisez plutôt le groupe de cases d'option ou le groupe de boutons bascule.
- S'il est nécessaire d'appuyer sur un bouton pour appliquer un paramètre. Utilisez plutôt une case à cocher.
Formatage
Structure
Le commutateur comprend les éléments suivants :
- Étiquette : texte concis qui décrit la fonction ou le réglage spécifique des commandes du commutateur.
- Piste : chemin horizontal le long duquel les utilisateurs font glisser la poignée du commutateur.
- Poignée : élément mobile que les utilisateurs font glisser le long de la piste pour basculer l'état du commutateur.
Placement de l'étiquette
L'étiquette du commutateur peut apparaître en haut (par défaut et recommandé) ou à gauche de la saisie elle-même.
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.
Texte de l'étiquette
Les étiquettes doivent indiquer clairement la fonction ou le paramètre que le commutateur contrôle, par exemple « Enregistrement automatique ».
Texte d'aide
Les commutateurs sont une commande de sélection bien connue et ne nécessitent généralement pas d'explications supplémentaires. En d'autres termes, vous n'avez pas besoin d'indiquer aux utilisateurs qu'ils doivent « basculer » le commutateur.
Utilisez un texte d'aide permanent lorsque les informations sont essentielles à la compréhension du fonctionnement du commutateur et doivent toujours être visibles.
Comportements
États
Le commutateur a deux états principaux : désélectionné et sélectionné.
| Visuel | État | Description |
|---|---|---|
 | Désélectionné | Indique l'état « off ». |
 | Sélectionné | Indique l'état « on ». |
En plus des états désélectionné et sélectionné, les commutateurs ont également des états pour activé, survol, actif, focus et désactivé.
| Visuel | État | Description |
|---|---|---|
 | Activé | Indique à l'utilisateur que l'élément est prêt à interagir (état par défaut). |
 | Survol | Indique que l'utilisateur a positionné le curseur de la souris sur l'élément. |
 | Actif | Indique que l'utilisateur clique ou appuie sur l'élément. |
| Focus | Indique que l'utilisateur a mis l'élément en évidence, généralement en utilisant une méthode de saisie comme un clavier ou la voix. Le statut Focus peut être utilisé avec tous les autres statuts (y compris le statut Désactivé). |
 | Désactivé | Indique à l'utilisateur que l'élément est désactivé et n'est pas interactif. L'élément est grisé. |
Interactions
Souris
Un utilisateur interagit avec un composant de commutateur en cliquant dessus avec une souris pour basculer entre ses états activé et désactivé. Pour indiquer le nouvel état, la piste change de couleur et la poignée change de position.
Clavier
Le composant de commutation peut être activé à l'aide du clavier. La clé Space active et désactive le commutateur.
Lecteur d'écran
Le commutateur est de type « input » et comprend également le rôle aria « switch ». Il tire son nom accessible de la valeur de l'étiquette de texte et inclut ce nom dans le cadre d'un attribut aria-label. La modification de la valeur de l'étiquette dans Storybook modifie également la valeur aria-label. La valeur aria-checked bascule de « true » à « false » en fonction de l'état de l'élément. Cette modification est exprimée par les lecteurs d'écran sous la forme « on » et « off » respectivement.
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 ce composant dans votre application, assurez-vous que le texte de l'étiquette du commutateur est clair et compréhensible.