Nouveau Components
Bouton à Bascule
Utilisé dans les interfaces numériques pour activer ou désactiver un paramètre unique. Ressemblant à un interrupteur physique, il offre un repère visuel clair de son état, ce qui le rend intuitif pour les utilisateurs. Les bascules sont couramment utilisées pour des réglages binaires, comme activer ou désactiver une option dans des applications ou des sites web. Elles constituent une alternative plus simple aux cases à cocher pour des actions immédiates et unitaires.
Quand l’utiliser
- Préférences utilisateur : utilisez des interrupteurs (toggles) pour des paramètres pouvant être activés ou désactivés, reflétant les préférences de l’utilisateur sans nécessiter de quitter la page en cours.
- Activation immédiate : implémentez des bascules lorsque les modifications doivent s’appliquer immédiatement, sans étape de confirmation supplémentaire.
Quand ne pas l’utiliser
- Paramètres complexes : évitez d’utiliser un bouton bascule pour des réglages nécessitant plus qu’un simple état activé/désactivé, comme des menus déroulants offrant plusieurs options.
- Actions critiques : n’utilisez pas de bouton à bascule pour des actions ayant d'importantes conséquences nécessitant une confirmation réfléchie, comme la suppression d’un compte.
Modes d'action
- Interaction à la souris : les interrupteurs doivent réagir visiblement aux clics de souris, indiquant le changement d’état d'activé à désactivé ou inversement.
- Navigation au clavier : les boutons à bascule doivent être accessibles au clavier, permettant aux utilisateurs de les activer via la touche Tab pour le focus, puis Entrée ou Espace pour changer l’état.
- Accessibilité pour les lecteurs d’écran : structurez les interrupteurs avec des libellés clairs et utilisez des attributs ARIA pour communiquer l’état et la fonction de la bascule aux lecteurs d’écran.
Contenu
- Indication claire de l’état : utilisez des repères visuels comme le contraste des couleurs ou du texte pour indiquer clairement l’état du bouton à bascule, afin que les utilisateurs comprennent si l’option est activée ou désactivée.
- Libellés concis : les libellés des boutons à bascule doivent être courts et précis, informant clairement les utilisateurs de la fonction de l’interrupteur.
- Retour immédiat : fournissez un retour instantané lors du changement d’état pour que les utilisateurs sachent que l’action a bien été effectuée.
- Éviter l’ambiguïté : assurez-vous que la finalité et les conséquences de la bascule sont explicites, afin d’éviter toute confusion sur ce que contrôle l’interrupteur.
Sur cette page
Fichiers et ressources Figma
Les designers peuvent importer tous les documents de conception depuis notre dépôt Figma en utilisant le lien fourni ci-dessous. Cela simplifie le processus de création et garantit un accès facile aux ressources graphiques les plus récentes pour un flux de travail plus efficace.
N’hésitez pas à utiliser l’aperçu du prototype situé ci-dessous comme exemple concret et démonstration du fonctionnement attendu du composant. Cette représentation interactive sert de guide visuel pour vous aider à comprendre les fonctionnalités et le comportement prévus.
Conception
Ressources
Bascule
Bascule
Bascule
Bascule
Prototype
Sur cette page
Mots-clés
- Interrupteur (Toggle Switch) : un élément d’interface utilisateur permettant d’activer ou de désactiver une option unique.
Décomposition des composants
- Étiquetage et identification : chaque interrupteur doit disposer d’une description textuelle claire. Utilisez un élément <label>, aria-labelledby ou aria-label pour décrire de manière concise la fonction et l’objectif de la bascule.
- Indication de l’état : indiquez visuellement l’état (activé/désactivé) de la bascule. Cela peut se faire via un changement de couleur, un déplacement du curseur ou un indicateur textuel.
- Compatibilité avec les lecteurs d’écran : l’interrupteur doit être correctement interprété par les lecteurs d’écran. Utilisez les attributs ARIA tels que role="switch" et aria-checked pour transmettre l’état actuel.
- Indication du focus : lorsqu’une bascule reçoit le focus, elle doit afficher un indicateur visible, comme un contour ou une mise en évidence.
- Gestion de l’état désactivé : si une bascule n’est pas interactive, indiquez clairement son état désactivé visuellement et utilisez l’attribut disabled pour la rendre non interactive.
- Retour lors de l’interaction : fournissez un retour immédiat lorsque l’état de la bascule change, qu’il soit visuel (par exemple, changement de couleur) ou auditif (par exemple, une annonce pour les utilisateurs de lecteurs d’écran).
Lecteur d’écran
- Le libellé correct est essentiel pour les lecteurs d’écran, car il fournit une description claire de l’interrupteur associé.
Sur cette page
| Touche | Fonction |
|---|---|
| Espace | Active ou désactive l’interrupteur |
| Tab | Déplace le focus vers la droite |
| Shift + Tab | Déplace le focus vers la gauche |
La démo en version mobile sera disponible prochainement. Dans l'attente, nous vous invitons à consulter la démo en version Desktop.