Aller au contenu principal

Champ texte

Dans un formulaire, un champ texte permet de saisir du texte sur une seule ligne, comme un nom ou un numéro de téléphone.

Exemples

Les exemples ci-dessous reproduisent les variantes de ces champs texte, en incluant celle avec une consigne et celle avec une aide à la saisie. Les champs en erreur peuvent être vus en laissant vides les champs et en cliquant sur Suivant.


Texte pour une consigne

Texte d’aide à la saisie

Exemple : 4 lettres A, 4 chiffres 9, 4 chiffres 9


Accessibilité

  • L’étiquette du champ texte doit être à proximité du champ texte.
  • L’étiquette du champ texte doit être codée dans une balise <label>.
  • La balise <label> doit être liée au champ texte.
  • L’attribut autocomplete doit être utilisé pour spécifier avec précision le type de données devant être entrée lorsqu’on demande une information personnelle à l’utilisateur (le prénom ou une adresse courriel, par exemple). Pour savoir quelles sont les valeurs nécessaires pour l’attribut, consultez la liste officielle dans le WCAG 2.1.
  • La bordure du champ doit avoir un taux de contraste d'au moins 3:1 avec l'arrière-plan.

Information complémentaire au champ

Tout texte apportant de l’information complémentaire au champ (un signe de $, une consigne, le message d’erreur) doit y être lié. Pour ce faire, il faut :

  • Ajouter l’attribut aria-describedby sur le champ
  • Ajouter l’attribut id sur la balise contenant le texte (<p>, <span>, <div>)
  • Lier l’attribut aria-describedby à l’attribut id (aria-describedby="id du texte")

Évaluer la page

L’information sur cette page vous a-t-elle été utile?
N’inscrivez pas de renseignements personnels. Notez que vous ne recevrez aucune réponse.