Nouveau Components
Champ de mot de passe
Le champ de saisie de mot de passe est un champ sécurisé conçu pour gérer les mots de passe créés par les utilisateurs. Il masque les caractères saisis afin de protéger les données sensibles, en affichant généralement des points ou des astérisques à la place des caractères réels. Ce composant inclut souvent des fonctionnalités telles que des indicateurs de robustesse du mot de passe et une option permettant d’afficher ou de masquer le contenu du champ pour plus de confort. Il est essentiel dans les processus d’authentification, car il permet aux utilisateurs de créer et de saisir leurs identifiants tout en préservant la confidentialité.
Quand l’utiliser
- Authentification confidentielle : Utiliser un champ de mot de passe pour les saisies de données sensibles, afin de garantir la confidentialité et la sécurité lors du processus d’authentification.
- Sécurisation des formulaires : Intégrer des champs de mot de passe dans les formulaires nécessitant une saisie sécurisée d’informations confidentielles, comme les formulaires d’inscription ou les pages de connexion.
Quand ne pas l’utiliser
- Données non sensibles : Éviter d’utiliser un champ de mot de passe pour des informations non sensibles, car le masquage du texte peut provoquer des erreurs de saisie.
- Informations publiques : Ne pas utiliser de champ de mot de passe pour des données destinées à être publiques ou visibles, comme les noms d’utilisateur ou les commentaires.
Modes d'action
- Interaction utilisateur : Les champs de mot de passe doivent masquer la saisie par défaut, en affichant des caractères de remplacement (comme des astérisques ou des points) afin de maintenir la confidentialité.
- Bouton d’affichage/masquage : Fournir une fonctionnalité permettant à l’utilisateur d’afficher temporairement le mot de passe saisi, afin de vérifier son exactitude lors de la frappe.
- Accessibilité lecteur d’écran : Les champs de mot de passe doivent être clairement étiquetés pour les lecteurs d’écran, avec des attributs ARIA indiquant qu’il s’agit d’un champ sécurisé.
Contenu
- Libellé explicite : Les libellés des champs de mot de passe doivent être explicites et indiquer clairement qu’il s’agit d’une saisie de mot de passe.
- Indicateurs de robustesse : Intégrer, si nécessaire, des indicateurs de robustesse pour encourager la création de mots de passe forts.
- Design cohérent : Maintenir un style visuel cohérent pour les champs de mot de passe sur l’ensemble du site ou de l’application afin de garantir une expérience utilisateur homogène.
Sur cette page
Fichiers et ressources Figma
Les designers peuvent importer l’ensemble des documents de conception depuis notre dépôt Figma en utilisant le lien fourni ci-dessous. Cela simplifie le processus de design et garantit un accès facile aux ressources les plus récentes pour un flux de travail plus efficace.
N’hésitez pas à utiliser le prototype affiché ci-dessous comme exemple pratique et démonstration du fonctionnement attendu du composant. Cette représentation interactive sert de guide visuel pour mieux comprendre son comportement et sa logique d’utilisation.
Conception
Ressources
mot de passe
mot de passe
mot de passe
mot de passe
mot de passe
Sur cette page
Mots-clés
- Champ de mot de passe : un élément d’interface sécurisé conçu pour permettre à l’utilisateur de saisir des données sensibles, généralement masquées afin de protéger l’information.
Guide d’accessibilité complet
- Label : Le champ de mot de passe est associé à un élément <label>, dont l’attribut
forcorrespond à l’iddu champ. Cela garantit une identification claire et une accessibilité optimale. - Champs obligatoires : Les champs de mot de passe sont souvent indiqués comme obligatoires via l’attribut
requiredou aria-required="true". Cette obligation est généralement signalée visuellement par un astérisque (*) placé à côté du label. Le <span> contenant cet astérisque peut être masqué des technologies d’assistance grâce à l’attribut aria-hidden="true". - Autocomplétion : Pour des raisons de sécurité, les champs de mot de passe utilisent généralement l’attribut autocomplete avec les valeurs
"new-password"ou"current-password", selon le contexte, afin de contrôler le comportement de remplissage automatique du navigateur.
- États d’erreur et de succès : Des indices visuels, comme un changement de couleur de bordure ou un texte d’aide, indiquent la validité du mot de passe saisi.
- L’attribut aria-invalid="true" est utilisé pour informer les technologies d’assistance que le mot de passe est invalide, et aria-describedby peut être utilisé pour relier le message d’erreur visible au champ.
- REMARQUE : Les deux attributs ARIA doivent être supprimés lorsque le champ redevient valide.
- État désactivé : Lorsque l’interaction avec le champ de mot de passe doit être désactivée, par exemple durant une phase de traitement, celui-ci est rendu inactif et stylisé de manière distincte pour le signaler. L’attribut disabled indique que le champ n’est pas interactif.
- Texte d’aide : Comme pour le champ de texte classique, un texte d’aide sous le label — comme les exigences de sécurité du mot de passe — guide l’utilisateur sur ce qui est attendu pour qu’un mot de passe soit valide. Le texte d’aide doit être relié au champ via l’attribut aria-describedby, tout en fournissant dans ce texte les indications de format, afin d’assurer la meilleure expérience utilisateur possible.
Lecteur d’écran
- Compatibilité avec les lecteurs d’écran : Les champs de mot de passe sont rendus accessibles grâce à l’utilisation d’attributs ARIA et d’un étiquetage clair, permettant aux lecteurs d’écran d’identifier correctement la nature du champ.
- L’élément <label> est essentiel pour les lecteurs d’écran : il fournit la description du champ de mot de passe grâce à son association avec l’attribut for, relié à l’id du champ.
Notes supplémentaires
- Le champ de mot de passe est exclusivement destiné à la saisie de texte masqué afin de préserver la confidentialité. Contrairement à une zone de texte multiligne (textarea), il s’utilise sur une seule ligne et intègre généralement des fonctionnalités supplémentaires, comme un bouton d’affichage/masquage du contenu du champ, pour améliorer l’ergonomie.
| Touche | Fonction |
|---|---|
| Shift + Tab / Tab | Déplace le focus vers le champ de mot de passe. |
La démo en version mobile sera disponible prochainement. Dans l'attente, nous vous invitons à consulter la démo en version Desktop.