Zones de texte

Principe directeur : Donner le contrôle à l’utilisateur

Quand utiliser cette composante

Une zone de texte (ou boîte de texte) est un champ à lignes multiples dans lequel l’utilisateur peut saisir des renseignements.

Employez une zone de texte si vous voulez que l’utilisateur saisisse plus d’une simple ligne de renseignements.

N’utilisez pas de zone de texte si :

• vous voulez que les utilisateurs vous fournissent une réponse en une seule ligne (songez alors plutôt à une saisie de texte);
• il est plus simple que l’utilisateur fasse un choix à partir d’une liste d’options établies
  • les utilisateurs estiment parfois qu’il est difficile de répondre à des questions ouvertes, alors ne les utilisez que lorsqu’il est insensé de leur offrir un choix de réponses dans une liste déroulante), des cases d’option) ou des cases à cocher).

Exemples

Exemples de cas d’utilisation de zones de texte :

• Commentaires et rétroaction de l’utilisateur
• Sections pour parler de soi
• Demandes de renseignements supplémentaires

Exemple

---

Spécifications techniques

En règle générale, donnez le contrôle à l’utilisateur à propos de ce qu’il saisit.

À faire :

• Toujours insérer une étiquette associée à un identifiant correspondant.
• Intégrer un texte d’indication seulement si nécessaire.
• Aligner à gauche les champs de texte (ainsi que leurs étiquettes et le texte d’indication).
• Permettre à l’utilisateur de :
  • copier-coller du texte;
  • saisir n’importe quel caractère (même si cela ne signifie pas qu’il puisse soumettre tout type de caractères, et rappelez-vous que vous pouvez reformater les réponses dans le système principal);
  • rédiger une réponse aussi longue qu’il le veut (autrement, il pourrait avoir un message d’erreur).
• Régler le champ de saisie à la hauteur qui convient au type de réponse escompté;
  • cela sert d’indicateur visuel de la longueur de réponse de l’utilisateur (p. ex. environ trois lignes).
• Faire en sorte que la zone de texte remplisse toute la largeur du conteneur l’entourant.
• Conserver les sauts de ligne à white-space: pre-wrap;

À ne pas faire :

• Limiter le nombre ou le type de caractères que l’utilisateur peut insérer.
  • Donner plutôt des directives précises ou déclencher un message d’erreur, au besoin – p. ex. Parlez-nous de vous (200 mots maximum) .
• Insérer un espace réservé ou un texte d’indication dans la zone de texte.
• Supprimer la poignée de redimensionnement qui se trouve dans le coin supérieur de la zone de texte, qui permet aux utilisateurs de faire glisser le coin du champ pour l’agrandir ou le réduire.
• Insérer une étiquette ou un texte d’indication dans la zone de texte.
  • Utiliser un « espace réservé au texte » comme celui-ci n’est pas une bonne pratique du point de vue de l’utilité et de l’accessibilité, parce qu’il disparaît lorsque les utilisateurs commencent à taper.