- Accueil
- Design
- Composants
- Formulaire
- Champ texte
Champ texte
Le champ texte est un élément de formulaire permettant la saisie libre d’une valeur textuelle. Il se décline en deux types selon la quantité d’information attendue : une seule ligne pour les réponses courtes et prévisibles, multiligne pour les réponses longues ou non structurées.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie et des contenus. Pour plus d’informations sur la composition et les comportements, consulter l’onglet « Spécifications ».
Variantes disponibles
Le champ texte se décline en 2 variantes :
- Champ texte d’une seule ligne
- Champ texte multiligne
Quand l’utiliser
Utiliser un champ texte lorsque la réponse attendue est une valeur textuelle libre, impossible à choisir dans une liste prédéfinie.
Privilégier le champ d’une seule ligne pour les réponses courtes et prévisibles (prénom, code postal, adresse courriel).
Privilégier le champ texte multiligne lorsque la réponse peut varier en longueur et nécessiter plusieurs lignes (commentaires, descriptions, messages).
Quand ne pas l’utiliser
Ne pas utiliser le champ texte lorsque les réponses possibles sont connues et en nombre limité. Utiliser plutôt :
- les boutons radio pour un choix unique parmi moins de cinq options ;
- les cases à cocher pour des choix multiples ;
- la liste déroulante pour un choix unique ou multiples parmi cinq options ou plus ;
- le curseur pour une valeur numérique comprise dans une plage définie.
Anatomie
- Libellé (avec ou sans indicateur de champ obligatoire)
- Précision
Facultatif - Zone de saisie de texte
- Espace réservé (placeholder)
- Valeur
- Poignée de redimensionnement
- Indicateur du nombre de caractères restants
Contenus
Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.
Champ texte (complet)
La largeur du champ doit être adaptée à la réponse requise, selon les formats disponibles.
Champ extra-large : Peut afficher jusqu’à ~110 caractères. Utilisé pour tout contenu textuel long comme l’objet d’une demande, le titre d’un document, le nom d’un programme gouvernemental, etc.
Champ large : Peut afficher jusqu’à ~70 caractères. Utilisé pour saisir des adresses municipales ou postales complètes (exemple : 2525, boulevard Laurier, Québec) ou des adresses courriel (exemple : prenom.nom@organisation.gouv.qc.ca).
Champ moyen : Peut afficher jusqu’à ~35 caractères. Utilisé pour saisir un nom ou prénom, un numéro de téléphone avec poste (exemple : 514 123-4567, poste 4521).
Champ petit : Peut afficher jusqu’à ~20 caractères. Utilisé pour saisir un code postal ou une date (exemple : AAAA-MM-JJ).
Champ extra-petit : Peut afficher jusqu’à ~8 caractères. Utilisé pour saisir des données courtes comme l’âge, un numéro de poste ou de bureau/appartement (exemple : RC-04) ou une heure (exemple : 8 h 30).
Champ multiligne : Peut afficher un grand nombre de caractères. Utilisé pour des descriptions, des commentaires ou tout contenu textuel long, pouvant s’étendre sur plusieurs phrases ou paragraphes.
Libellé
Le libellé doit être clair, concis, informatif et toujours visible. Les signes de ponctuation en fin de libellé sont à éviter (pas de deux-points ni de point final).
Par exemple :
- Correct : Numéro d’assurance sociale → À éviter : NAS (abréviation)
- Correct : Date de naissance → À éviter : Date (trop vague)
- Correct : Numéro de téléphone principal → À éviter : Veuillez entrer votre numéro de téléphone principal (trop long, commence par un verbe)
Il ne doit jamais être remplacé par un texte d’espace réservé.
Le libellé peut être accompagné d’un indicateur de champ obligatoire.
Pour un champ en lecture seule, le libellé doit être complété par la mention « , en lecture seule », exemple : « Numéro de dossier, en lecture seule ». Cette mention explicite ne repose pas sur un indice visuel seul et satisfait aux exigences d’accessibilité.
Précision
La précision est une information facultative placée sous le libellé pour clarifier le type de contenu attendu.
Elle ne doit pas répéter le libellé ni servir d’instruction générale.
Lorsque le format attendu contient des caractères difficiles à distinguer à l’oreille (majuscules, chiffres, tirets, espaces), la précision doit comporter deux versions du contenu :
- une précision visuelle, masquée aux technologies d’assistance (aria-hidden="true") ;
- une précision vocale en langage naturel, masquée visuellement (qc-sr-only).
Par exemple :
- Libellé : Date de naissance → Précision visuelle : Format : AAAA-MM-JJ → Précision vocale : Format : 4 chiffres pour l’année, 2 pour le mois, 2 pour le jour, séparés par des tirets
- Libellé : Code postal → Précision visuelle : Format : H2X 3X2 → Précision vocale : 6 caractères : lettre, chiffre, lettre, espace, chiffre, lettre, chiffre
- Libellé : Numéro de téléphone → Précision visuelle : Format : 418 123-4567 → Précision vocale : 10 chiffres avec indicatif régional
- Libellé : Numéro d’assurance maladie (RAMQ) → Précision visuelle : Format : TREP 1234 5678 → Précision vocale : 4 lettres suivies de 8 chiffres
- Libellé : Code permanent → Précision visuelle : Format : TREP12345678 → Précision vocale : 4 lettres suivies de 8 chiffres
Espace réservé (placeholder)
L’espace réservé peut contenir un exemple de valeur valide (exemple : « Exemple : jean.tremblay@courriel.com »).
Il ne doit pas contenir d’instructions essentielles à la complétion du champ, car il disparaît à la saisie et n’est pas toujours lu par les technologies d’assistance.
L’espace réservé ne doit pas répéter le contenu de la précision.
L’espace réservé doit toujours être précédé de « Exemple : » afin d’éviter qu’il soit confondu avec une valeur pré-remplie, tant visuellement qu’à l’oreille.
Par exemple :
- Libellé : Adresse courriel → Espace réservé : Exemple : prenom.nom@organisation.gouv.qc.ca
- Libellé : Numéro de téléphone → Espace réservé : Exemple : 418 123-4567
- Libellé : Code postal → Espace réservé : Exemple : H2X 3X2
Indicateur du nombre de caractères restants (champ multiligne)
L’indicateur est affiché dynamiquement sous les champs multiligne. Il précise le nombre de caractères restants ou en trop selon le contexte. Exemple :
- État normal : 432 caractères restants
- État d’erreur : 5 caractères en trop
Le texte annoncé par les lecteurs d’écran doit être sobre : préférer « 432 restants » à « Il vous reste 432 caractères ». Lorsque la limite est dépassée, annoncer « 5 caractères en trop » satisfait les exigences en accessibilité.
Gestion des erreurs
Un message d’erreur s’affiche sous le champ concerné lorsque la validation échoue. Le message doit être explicite.
Par exemple :
- Champ obligatoire vide : « Ce champ est obligatoire. »
- Format invalide : « Le format de l’adresse courriel saisie n’est pas valide. »
- Nombre de caractères dépassé : « Le texte ne peut pas dépasser 500 caractères. »
Conseils supplémentaires
Il faut éviter d’ajouter des informations superflues entre les champs texte d’un formulaire pour une expérience utilisateur fluide.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans les trousses de design.
Composition
Cette section documente le positionnement, les dimensions et les espacements des éléments constitutifs du composant.
Champ texte (complet)
Positionnement et alignement : Les champs texte sont placés les uns au-dessus des autres par défaut. Dans le format bureau, deux champs peuvent être placés côte à côte seulement s’ils sont complémentaires.
Espacements : L’espacement vertical entre la zone de saisie d’un champ et le libellé du champ immédiatement suivant est de 32 px. Une gouttière de 32 px doit se trouver entre les champs placés sur une même ligne.
Libellé et précision
Dimensions : Le libellé et la précision peuvent être plus larges que la zone de saisie de texte, sans toutefois dépasser 825 px.
Zone de saisie de texte (champ texte d’une seule ligne)
Dimensions : La largeur du champ texte peut varier entre cinq grandeurs selon les besoins. Les formats de largeur disponibles, leurs capacités en caractères et leurs usages typiques sont documentés dans l’onglet « Vue d’ensemble », section Contenus.
Zone de saisie de texte (champ texte multiligne)
Dimensions : Hauteur minimale de 56 px (~2 lignes). Hauteur maximale recommandée : 284 px. Sa largeur est Extra-large.
Indicateur du nombre de caractères restants (champ multiligne)
Positionnement et alignement : L’indicateur du nombre de caractères restants est aligné à droite du champ texte multiligne.
Dimensions : Il occupe la même largeur que le champ multiligne auquel il est associé.
Messages d’erreurs
Message d’erreur sur un champ obligatoire
Voir la page « Message d’erreur » pour les indications sur ce composant.
Message d’erreur concernant le nombre de caractères restants
Positionnement et alignement : Sous le champ texte multiligne, en remplacement de l’indicateur du nombre de caractères restants.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Validation
La validation se déclenche de préférence lorsque le champ perd le focus, jamais pendant la saisie active.
Débordement
Champ d’une seule ligne : En cas de contenu trop long pour une ligne, le texte peut défiler horizontalement dans la zone de saisie de texte lors du déplacement du curseur.
Champ multiligne : Si le contenu dépasse la zone verticale, l’utilisateur peut ajuster la taille de la zone de saisie de texte avec la poignée de redimensionnement ou faire défiler verticalement le contenu à l’intérieur du conteneur défini.
Champ désactivé
Un champ désactivé ne peut pas recevoir le focus, ne déclenche aucune validation et sa valeur n’est pas soumise avec le formulaire
Champ en lecture seule
Un champ en lecture seule peut recevoir le focus et sa valeur est soumise avec le formulaire. La saisie est bloquée : l’utilisateur peut sélectionner et copier le contenu, mais ne peut pas le modifier.
Libellé
Le libellé doit être explicitement lié au champ (for/id ou aria-labelledby).
L’indicateur de champ obligatoire doit être visible et programmatique (aria-required).
Précision
La précision peut être associée au champ via l’attribut aria-describedby.
Zone de saisie de texte
Type de clavier adapté (type="email" pour un courriel).
Espace réservé (placeholder)
L’espace réservé disparaît dès que l’utilisateur saisit du texte.
Valeur
Si une valeur est pré-remplie, elle doit être validée et modifiable si nécessaire.
Messages d’erreur
Messages d’erreur liés par aria-describedby.
Indicateur du nombre de caractères restants (champ multiligne)
L’indicateur du nombre de caractères restants doit mettre à jour le compte de manière dynamique. Lorsque le nombre maximal de caractères est dépassé, l’indicateur bascule en état d’erreur et affiche le nombre de caractères excédentaires (exemple : « 5 caractères en trop »).
L’indicateur est rendu avec aria-live="polite", ce qui signifie que les technologies d’assistance annoncent sa valeur dès qu’elle change. Pour éviter une annonce à chaque frappe, la mise à jour de l’indicateur doit être différée d’environ 1 000 ms après la dernière saisie (debounce).
Un message d’erreur complémentaire peut s’afficher sous l’indicateur si une validation à l’envoi est configurée.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer dans la zone de saisie pour y placer le curseur.
- Double-cliquer pour sélectionner un mot ; triple-cliquer pour tout sélectionner.
- Cliquer et glisser pour sélectionner une portion de texte.
- Clic droit pour ouvrir le menu contextuel du navigateur (couper, copier, coller, etc.).
- Cliquer en dehors du champ pour retirer le focus et déclencher la validation.
- Champ texte multiligne uniquement : Cliquer et glisser la poignée en bas à droite pour ajuster la hauteur du champ.
- Survoler un champ désactivé affiche le curseur not-allowed ; aucune interaction n’est possible.
- Cliquer dans un champ en lecture seule place le curseur dans le texte et permet la sélection, mais pas la saisie.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tab/Shift + Tab : naviguer vers le champ suivant ou précédent.
- Touches directionnelles : déplacer le curseur caractère par caractère (gauche, droite) ou ligne par ligne (haut, bas dans un champ multiligne).
- Ctrl + touches directionnelles : déplacer le curseur mot par mot.
- Début/Fin : aller au début ou à la fin du contenu.
- Shift + touches directionnelles : étendre la sélection.
- Ctrl + A/C/X/V/Z : sélectionner tout, copier, couper, coller, annuler.
- Suppr/Retour arrière : supprimer le caractère suivant ou précédent.
- Champ texte d’une seule ligne uniquement : Entrée soumet le formulaire si configuré en ce sens.
- Champ texte multiligne uniquement : Entrée insère un saut de ligne (ne soumet pas le formulaire).
- Un champ désactivé est ignoré lors de la navigation par Tab.
- Un champ en lecture seule est atteignable par Tab ; le contenu peut être sélectionné avec Shift + touches directionnelles et copié avec Ctrl + C, mais aucune saisie n’est possible.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 7 octobre 2026