Champ de saisie
<gcds-input>

Autres noms : saisie de texte, zone d'entrée.

Un champ de saisie est un espace permettant de saisir une courte réponse à une question ou à une directive.

• GitHub
• Figma

Structure d'un champ de saisie

1. L'étiquette indique les renseignements que l'utilisateur doit saisir dans le champ.
2. Le texte explicatif précise les exigences spécifiques pour chaque champ de saisie afin de favoriser la réussite de la tâche.
3. Le champ est le conteneur avec lequel l'utilisateur·rice interagit pour fournir sa réponse.

Conception et accessibilité des champs de saisie

Rédigez une étiquette courte, précise et unique

• Demandez les renseignements requis avec le plus de concision possible. La forme interrogative peut rendre une étiquette inutilement longue et l'utilisateur·rice pourrait ne pas la lire en entier.
• Choisissez des étiquettes uniques pour chaque champ de saisie et zone de texte dans une page, comme « Votre nom complet » et « Nom du ou de la gestionnaire ».
• Évitez d'employer un jargon technique, comme « adresse électronique du sujet » ou « ID du compte ». Soyez plutôt précis·e et employez un ton personnel, comme « nom complet » et « âge de l'enfant ».
• Évitez d'utiliser des expressions familières et des verbes courants qui ne sont pas connus des personnes ne parlant pas couramment l'anglais ou le français.
• Expliquez tout terme qui pourrait porter à confusion. Par exemple, « Pseudonyme (nom que vous souhaitez utiliser) ».

Masquez l’étiquette seulement lorsque le but est clair

• Masquez visuellement l’étiquette seulement lorsque le but du champ de saisie est clairement communiqué par le contexte, rendant l’étiquette visuellement redondante, comme dans les cas suivants :
  • interfaces de clavardage ou de messagerie;
  • composants de recherche;
  • tableaux ou autres mises en page où l’espace est limité;
  • champs de saisie de nom de fichier dans les applications web;
  • paramètres et configurations.
• Fournissez toujours une étiquette pour soutenir les technologies d’assistance.
• N’ajoutez pas de texte explicatif si vous masquez l’étiquette, puisque celui-ci manque alors de contexte et peut distraire ou prêter à confusion.

Limitez l’utilisation du texte fictif

• Dans les formulaires, évitez d’utiliser du texte fictif pour remplacer une étiquette ou pour transmettre des instructions ou des renseignements à retenir, car cela peut créer des problèmes d’accessibilité.
• En dehors des formulaires, utilisez du texte fictif uniquement pour renforcer un objectif déjà clair selon le contexte visible (par exemple, dans les interfaces de recherche ou de conversation).

Adaptez la taille du champ de saisie au type de réponse

• Définissez l'attribut de la taille du champ de saisie pour les réponses dont vous connaissez la longueur précise (taille "50" = 50 caractères). Par exemple, 6 caractères pour un code postal ou 10 caractères pour un numéro de téléphone.
• Envisagez d’utiliser la majorité de la largeur du conteneur, par exemple à 90 %, lorsque vous ne savez pas la longueur exacte de la réponse.
• Utilisez le maximum de 75 caractères pour les réponses sans longueur fixe.

Favorisez la réussite de la tâche en ajoutant du texte explicatif

• Ajoutez du texte explicatif pour aider l'utilisateur·rice à fournir une valeur valide dans le champs de saisie.
• Rédigez un texte explicatif qui est instructif, court et précis.

Écrire des messages d'erreur pour les champs de saisies requis

• Utilisez les messages d'erreur pour traiter les saisies manquantes ou non valides.
• Rédigez un message d'erreur pour tout champ de saisie obligatoire. Si un champ est facultatif, évitez de lui associer un message d'erreur.
• Évitez de critiquer la personne qui utilise le produit. Dites-lui plutôt exactement ce qu'elle doit faire pour progresser.