Champs de saisie

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular

<cpc-ds-input-field
    labelText = "Full name"
    fieldValue = "This is text"
    [formControl]="fullNameFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Full name"
    fieldValue = "This is text"
    [formControl]="disableFullNameFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Full name"
    fieldValue = "This is text"
    [readOnlyField] = "true"
    [formControl]="fullNameReadOnlyFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Full name"
    hintText = "Don't disclose personal infos"
    fieldValue = "This is text"
    [readOnlyField] = "false"
    (click)="beep()"
    [formControl]="fullNameFormControl"
    id = 'fullName'>
</cpc-ds-input-field>

<cpc-ds-input-field
    labelText = "Password"
    type="password"
    id = 'password'>
</cpc-ds-input-field>

<cpc-ds-input-field
    id = 'additionalDetails'
    inputFormat = "textAreaType"
    [formControl]="textareaFormControl"
    labelText = "Additional Information"
    [showMaxLengthLabel] = "true"
    [maxchar] = "140">
</cpc-ds-input-field>

HTML

<script src="[JS-PLACE-HOLDER]"></script>

<label for="fullname">Full name</label>
<input id="fullname" type="text" autocomplete="off">

<label for="error">Full name *</label>
<input
 aria-required="true"
 aria-invalid="true"
 aria-describedby="errMsg2"
 id="error"
 type="text"
 class="error"
 autocomplete="off">
<div id="errMsg2" class="ds-error">Error message goes here</div>

<label id="fullnameHint">Full name</label>
<p id="hintText" class="hintText">Hint text goes here</p>
<input
 type="text"
 autocomplete="off"
 aria-labelledby="fullnameHint hintText">

<!-- Read Only -->
<label for="fullnameReadonly">Full name</label>
<input
 id="fullnameReadonly"
 readonly
 value="Read only text here"
 type="text"
 autocomplete="off">

<label for="disabled">Full name</label>
<input
 aria-disabled="true"
 disabled
 id="disabled"
 class="disabled"
 type="text"
 autocomplete="off">

<label 
 for="textarea" 
 id="textarea-label">
  Additional Information
</label>

<textarea 
 id="textarea" 
 maxLength="102" 
 aria-labelledby="textarea-label textarea-maxCharacter">
</textarea>

<p 
 id="textarea-maxCharacter" 
 class="maxCharacter">
  102 Character limit here
</p>

<label
 for="textarea2"
 id="textarea2-label">
  Additional Information
</label>

<textarea
 aria-invalid="true"
 aria-describedby="errMsg"
 aria-labelledby="textarea2-label textarea2-maxCharacter"
 id="textarea2"
 class="error"
 maxLength="10">
</textarea>

<p
 aria-live="polite"
 id="textarea2-maxCharacter"
 class="maxCharacter">
  10 Character limit here
</p>

<div
 id="errMsg"
 class="ds-error">
  Error message goes here
</div>

Lignes directrices générales

Les champs de saisie permettent aux utilisateurs de soumettre des données exclusives ou complexes.

De courts champs de saisie sont utiles pour les noms, les adresses ou tout autre élément d’information exclusif à chaque utilisateur.

Les champs de saisie longs (appelés zones de texte) sont tout indiqués pour recueillir des réponses qualitatives ou des données complexes.

Lorsqu’un utilisateur saisit un mot de passe, celui-ci doit être masqué, à moins qu’il choisisse de le révéler. Pour obtenir plus de renseignements, consultez la page intitulée Formulaires.

Positionnement

Tenez compte de la quantité et du type de renseignements demandés au moment de déterminer la longueur du champ. Alignez les étiquettes dans le haut et à gauche du champ de saisie pour permettre aux utilisateurs de les lire rapidement.

Les champs de saisie sont des composants de grande taille et occupent d’ordinaire la majeure partie d’un formulaire. Il s’agit d’un élément important à prendre en considération lors de la structuration des formulaires. Consultez la page intitulée Formulaires pour apprendre comment les intégrer de façon stratégique.

Interaction

États

Les champs de saisie peuvent avoir les états par défaut, de mise en évidence, actif et d’erreur.

• Par défaut
  Dans cet état, l’utilisateur n’a pas accédé au champ, mais il est en mesure de le faire.
• Prénom
  Dans cet état, un utilisateur a accédé au champ de saisie sans souris. Le champ se trouve dans un encadré bleu et peut être activé en saisissant du texte ou en appuyant sur la barre d’espacement.
• Désactivé
  Dans l’état désactivé, un champ de saisie est visible, mais il est impossible de l’utiliser. Les couleurs pâles permettent de distinguer les champs de saisie désactivés des champs de saisie activés.
• Lecture seulement
  Dans cet état, le contenu d’un champ de saisie est visible, mais il n’est pas interactif. Les couleurs pâles permettent d’indiquer qu’aucune interaction avec le champ n’est possible. Cet état est habituellement utilisé lorsqu’un procédé d’arrière-plan (UGS, numéro de commande, etc.) a généré un champ de saisie.

Facteurs à prendre en compte en matière d’accessibilité

Lecteurs d’écran

Utilisez les étiquettes de champ pour vous assurer que les champs de saisie sont annoncés lorsqu’ils sont mis en évidence.

Texte d’espace réservé

Les technologies d’assistance ne traitent pas le texte d’espace réservé comme des étiquettes. Certains ne sont pas pris en charge et ne sont pas affichés dans les anciens navigateurs Web. Les utilisateurs pourraient même penser que le formulaire est déjà rempli.

Dans la mesure du possible, écrasez un texte explicatif sur le texte d’espace réservé. Fournissez les renseignements dont l’utilisateur a besoin pour remplir le formulaire.

Spécifications du design

Lignes directrices générales

Écrivez les étiquettes de champs de saisie en langage clair. Indiquez aux utilisateurs ce qu’ils doivent saisir dans les champs.

• Un champ de saisie est utilisé pour saisir du texte sur une seule ligne.
• Chaque champ doit être précédé d’une étiquette qui décrit la saisie attendue.
• Du texte de remplissage peut être utilisé pour aider l’utilisateur à faire la saisie.

Lignes directrices

Interaction avec le clavier

Lorsque le champ de saisie est mis en évidence :

• Touche de tabulation : Fait passer la cible du clavier à l’élément interactif suivant sur la page.
• Combinaison des touches « Maj + Tab » : Fait passer la cible du clavier à l’élément interactif précédent sur la page.
• Touches des caractères : Permettent de saisir les caractères dans la boîte de texte.
• Flèche gauche : Passe au caractère précédent dans le champ de saisie.
• Flèche droite : Passe au caractère suivant dans le champ de saisie.

Champs de saisie automatique

Les attributs de saisie automatique facilitent la tâche des personnes qui ont une dextérité réduite ou une incapacité cognitive. Pour en savoir plus, veuillez consulter la liste complète des types de saisie automatique HTML 5.2 (en anglais seulement – lien partagé avec l’autorisation de W3C).

Indication de la limite de caractères d’une zone de texte

Les personnes qui utilisent un lecteur d’écran doivent être en mesure de connaître la limite de caractère de la zone de texte. Voici la meilleure façon de procéder :

• Ajouter un compteur de caractères visible. Le compteur de caractères peut aussi être associé à la balise au moyen de l’attribut aria-labelledby.
• Insérer à certains endroits précis un attribut aria-live=”polite” qui permet d’indiquer au lecteur d’écran le nombre de caractères restants (0 caractère restant, maximum de caractères atteint, [75 %, 50 %, 25 %, 10 %] de caractères restants, etc.).

Rôles et propriétés ARIA

Les rôles et propriétés WAI-ARIA suivants peuvent être associés aux champs de saisie et aux éléments de la zone de texte :

• Utiliser un élément de HTML <input> natif de type type=”text” pour la saisie sur une ligne unique ou une balise HTML <textarea> pour la saisie multiligne. Il est possible d’ajouter l’attribut role="textbox" à l’élément lors de la conception d’un <input> personnalisé; il faut toutefois privilégier les éléments HTML natifs.
• Il faut configurer l’attribut aria-required="true" de façon à communiquer les champs obligatoires aux personnes qui utilisent un lecteur d’écran.
• Aria-invalid=”true” pour un champ comportant une erreur.
• Aria-disabled=”true” pour un champ désactivé.
• Propriété « readonly » sur le champ readonly.
• Aria-live=”polite” pour la chaîne de texte indiquant la limite de caractères aux lecteurs d’écran. La chaîne est annulée dès que la personne appuie sur une touche.
• Les balises, le texte d’aperçu (le cas échéant) et la chaîne du compte de caractères (le cas échéant) sont associés au champ au moyen de l’attribut aria-labelledby. L’attribut prend la valeur des identificateurs (séparés par une espace) des éléments contenant chaque balise.
• Le texte d’erreur (le cas échéant) est associé au champ au moyen de l’attribut aria-describedby. L’attribut prend la valeur de l’identificateur de la chaîne d’erreur.

Test

Au moment de tester un champs de saisie, la personne effectue le test doit s’assurer de ce qui suit :

• Est entièrement accessible au moyen du clavier.
• Les indications des éléments mis en évidence sont claires et bien en vue.
• Les propriétés ARIA sont exactes.
• Les indicateurs visibles des champs obligatoires (p. ex., « * ») sont définis dans la partie supérieure du formulaire.
• Les limites de caractères (le cas échéant) sont indiquées au lecteur d’écran.
• Le lecteur d’écran annonce la balise du champ, les renseignements sur le rôle du champ, le texte d’aperçu (le cas échéant), le message d’erreur (le cas échéant), le nombre de caractères (le cas échéant) et les propriétés ARIA connexes (p. ex., « obligatoire » ou « invalide »).
• Les personnes qui utilisent un appareil mobile ont accès au type de clavier approprié (p. ex., clavier de courriel pour les champs de courriel).

Contenu connexe

• Menus déroulants
• Cases à cocher