Nouveau Components
Champ de saisie
Le champ de saisie est essentiel pour permettre à l’utilisateur d’entrer des données. Il est utilisé pour saisir des informations telles que des noms ou des adresses e-mail, et peut être personnalisé pour améliorer l’ergonomie et le style. Le champ de saisie standard est conçu pour des entrées courtes sur une seule ligne, tandis que la zone de texte est adaptée à des saisies plus longues et sur plusieurs lignes.
Quand l’utiliser
- Saisie sur une seule ligne : utilisez le champ de saisie par défaut pour des contenus courts et sur une seule ligne, comme un nom ou une adresse e-mail.
- Champs personnalisables : utilisez un champ de saisie lorsque vous avez besoin d’un champ pouvant être adapté avec des règles de validation, des espaces réservés (placeholders) et un style personnalisé.
Quand ne pas l’utiliser
- Contenu sur plusieurs lignes : évitez d’utiliser un champ de saisie pour des entrées longues ou sur plusieurs lignes ; utilisez plutôt une zone de texte.
- Saisie de données complexes : n’utilisez pas un champ de saisie pour des données complexes nécessitant des méthodes de saisie plus structurées, comme des dates ou des sélecteurs de couleur.
Modes d'action
- Interaction au focus : les champs de saisie doivent se mettre en évidence ou changer d’apparence lorsqu’ils sont ciblés, indiquant qu’ils sont prêts pour la saisie.
- Navigation au clavier : les utilisateurs doivent pouvoir accéder aux champs de saisie et interagir avec eux au clavier, généralement en naviguant avec la touche Tab.
- Accessibilité pour les lecteurs d’écran : assurez-vous que les champs de saisie sont correctement étiquetés pour les lecteurs d’écran, en utilisant aria-label ou un élément <label> associé pour garantir la clarté.
Contenu
- Texte d’exemple (placeholder) : à utiliser uniquement en complément et avec un contraste suffisant. Les instructions de saisie et le format attendu doivent être fournis via un
labelet/ou un texte d’aide visible, le placeholder n’étant ni suffisant ni fiable pour transmettre cette information. - Étiquetage clair : chaque champ de saisie doit avoir une étiquette claire et associée qui décrit sa fonction.
- Retour de validation : fournissez un retour immédiat et explicite concernant les règles de validation, comme les champs obligatoires ou les erreurs de format (ex. : validation d’adresse e-mail).
- Style cohérent : maintenez une apparence cohérente pour les champs de saisie à travers l’application ou le site afin de garantir une expérience utilisateur harmonieuse.
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 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 l’aperçu du prototype situé ci-dessous comme exemple pratique et comme 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
Nom d’utilisateur
Nom d’utilisateur
Nom d’utilisateur
Nom d’utilisateur
Nom d’utilisateur
Sur cette page
Mots-clés
- Champ de saisie (Text Input) : un élément d’interface utilisateur permettant aux utilisateurs d’entrer du texte sur une seule ligne dans un formulaire.
- Éléments de formulaire HTML (HTML Form Elements) : des composants utilisés pour collecter les saisies des utilisateurs en HTML, tels que les champs de texte, les cases à cocher, les boutons radio et les boutons d’envoi.
Décomposition des composants
Champ de saisie par défaut
- Étiquette (Label) : le champ de saisie est identifié par un élément <label> dont l’attribut for correspond à l’id du champ, garantissant un étiquetage clair et une bonne accessibilité.
- Champs obligatoires : un champ est marqué comme obligatoire en ajoutant l’attribut required ou aria-required="true" à l’élément de formulaire. Visuellement, l’obligation peut être indiquée par un astérisque associé au libellé, à condition qu’une mention explicite soit présente au début du formulaire pour en expliquer la signification (Ex : "Les champs marqués d’un astérisque (*) sont obligatoire").
- Saisie automatique (autocomplete) : lorsque le type d’information attendu est connu (nom, prénom, email, adresse, téléphone, etc.), utilisez l’attribut autocomplete avec une valeur normalisée et appropriée définie par la spécification HTML (Ex : name, given-name, family-name, email, tel, etc.)
Validation du champ
- États d’erreur et de succès : ne pas signaler ces états uniquement par la couleur. Un message textuel explicite doit également être affiché sous le champ et associé à celui-ci via aria-describedby.
- En cas d’erreur, le champ doit porter l’attribut aria-invalid="true". Le message est ajouté ou mis à jour dynamiquement et annoncé aux technologies d’assistance (par exemple via une zone role="alert").
Champs désactivés
- État désactivé : utilisé lorsque le champ de saisie ne doit pas être interactif (par exemple lorsqu’une action préalable est requise). Le champ porte alors l’attribut
disabledet présente un style visuel distinct indiquant son indisponibilité.
Descriptions supplémentaires
- Texte d'aide : un texte descriptif supplémentaire peut être fourni sous l'étiquette pour aider les utilisateurs à remplir le formulaire. Liez le texte d'aide à son champ à l'aide de l'attribut
aria-describedby, tout en fournissant des conseils de formatage dans le texte d'aide lui-même, afin de garantir la meilleure expérience utilisateur possible.
Lecteur d’écran
- Chaque état et fonctionnalité du champ de saisie est conçu pour être compatible avec les lecteurs d’écran.
- L’utilisation de l’attribut aria-describedby pour les états d’erreur et de succès garantit que le statut du champ est correctement communiqué aux utilisateurs qui dépendent d’un lecteur d’écran.
- L’élément <label>, associé à chaque champ via l’attribut for, fournit des descriptions claires et concises, améliorant ainsi l’accessibilité globale du composant.
Notes supplémentaires
- Le champ de saisie est principalement destiné aux entrées sur une seule ligne, tandis qu’une zone de texte (textarea) est utilisée pour les contenus sur plusieurs lignes. Elle suit les mêmes principes de style, mais avec une hauteur accrue pour accueillir davantage de texte.
| Touche | Fonction |
|---|---|
| Shift + Tab / Tab | Déplace le focus vers la zone de saisie. |