Aide à la saisie

La mise en place d'aide à la saisie doit respecter des règles d'accessibilité.

Information textuelle d’aide à la saisie

Information simple

Les aides à la saisie :

  • sont intégrées directement entre les éléments label ;
  • permettent de connaître le format de saisie attendu (ex: 25/11/1987) ;
  • permettent de connaître le type et le poids maximal autorisé pour l’envoi de fichiers.
<label for="numero">Numéro d'immatriculation de votre véhicule (Format attendu : AB-123-CD)
	<input type="text" id="numero" name="numero" />
</label>

<label for="photo">Photo de profil
	<input type="file" id="photo" name="photo" />
	<span>Format autorisé : .jpg, .gif, .png - Poids maximum 100 ko.</span>
</label>

Information complexe

Les informations à délivrer pour remplir un champ peuvent nécessiter une zone plus importante. Elles seront alors implémentées à l’aide de l’attribut aria-describedby.

<label for="mdp">Mot de passe</label>
 <input type="password" id="mdp" name="mdp" aria-describedby="quoi" />
<div class="quoi">
 <h2>Votre mot de passe doit contenir : </h2>
 <ul>
    <li>au moins 12 caractères</li>
    <li>des lettres en majuscule et en minuscule</li>
    <li>au moins un chiffre</li>
    <li>au moins un signe parmi : &*-,;</li>
 </ul>
 <p>Vous ne pouvez pas utiliser les trois derniers mots de passe déjà renseignés.</p>
</div>

Champ obligatoire

Si un des champs du formulaire est obligatoire :

  • la mention de la présence de champs obligatoires dans le formulaire sera signalée au début du formulaire ;
  • on signalera pour chaque champ obligatoire que celui-ci l’est,
    • soit en l’écrivant entre les balises <label> ; exemple : <label>... (champ obligatoire)</label>,
    • soit par un signe distinctif (qui aura été présenté en début de formulaire) intégré entre les balises <label>. Ce signe ne sera pas implémenté via CSS pour être accessible.
  • le champ obligatoire sera codé avec l’attribut required.

Rappel : en aucun cas, on ne signalera le champ obligatoire en utilisant la couleur (exemple de non conformité : “Les champs obligatoires sont signalés en rouge”).

<form ...>
<p>Les champs signalés par une étoile(*) sont obligatoires.</p>
<label for="nom">Nom *</label>
<input type="text" name="nom" id="nom" required>
[...]
</form>

Autocomplétion

L’attribut autocomplete permet de faciliter le remplissage des champs qui contiennent une information personnelle enregistrée au préalable par l’utilisateur.
Voici les attributs les plus courants :

  • Nom : <input type="text" auto-complete="name" ...>
  • Prénom : <input type="text" auto-complete="given-name" ...>
  • Mail : <input type="mail" auto-complete="email" ...>
  • Téléphone : <input type="tel" auto-complete="tel" ...>
  • Identifiant (nom d’utilisateur) : <input type="text" auto-complete="username " ...>
  • Mot de passe (associé à l’identifiant) : <input type="password" auto-complete="current-password" ...>

Voir aussi

Autocomplétion sur le formulaire

Posé directement sur l’élément form, c’est la navigateur qui se chargera de faire des suggestions en fontion du type de champ que le formulaire comporte (texte, nombre…). L’autocomplétion sera implémentée de la manière suivante :

<form autocomplete="on" [...] >

Autocomplétion pour les adresses

Recueil de l’adresse en un seul champ

Une adresse est parfois composée de plusieurs lignes : adresse, complément d’adresse (bâteiment, escalier…). On peut proposer de recueillir ces informations dans un seul champ. Pour cela, on utilisera un champ de type textarea.

Visuel

Code HTML

<label for="adresse">Adresse</label> 
<textarea id="adresse" autocomplete="street-address"></textarea>

<label for="code-postal">Code postal</label>
<input type="text" id="code-postal" autocomplete="postal-code">

<label for="ville">Ville</label> 
<input type="text" id="ville" autocomplete="address-level2">

Recueil de l’adresse sur plusieurs champs

Plutôt que de recueillir l’adresse en un seul champ, on va demander l’adresse et le complément d’adresse.

Visuel

Code HTML

<label for="numero-voie">Numéro et voie</label> 
<input type="text" id="numero-voie" autocomplete="address-line1">

<label for="complement-adresse">Complément d'adresse</label> 
<input type="text" id="complement-adresse" autocomplete="address-line2">


<label for="code-postal">Code postal</label>
<input type="text" id="code-postal" autocomplete="postal-code">

<label for="ville">Ville</label> 
<input type="text" id="ville" autocomplete="address-level2">

Autocomplétion pour le numéro de téléphone

Il y a plusieurs façons de recueillir le numéro de téléphone de l’utilisateur selon qu’on veuille récolter l’indicatif du pays ou non.

Visuel

Code HTML

<!-- Numéro simple -->
<label for="tel">Numéro de téléphone simple</label> 
<input type="tel" id="tel" autocomplete="tel">

<!-- Numéro avec indicatif dans une zone de texte -->
<label for="indicatif">Indicatif</label>
<input type="text" id="indicatif" autocomplete="tel-country-code">

<label for="tel">Numéro de téléphone</label>
<input type="text" id="tel" autocomplete="tel-national">

<!-- Numéro avec indicatif dans une zone déroulante -->
<label for="indicatif">Indicatif</label>
<select id="indicatif" autocomplete="tel-country-code">
     <option value="+332">+32</option>
     <option value="+33">+33</option>
     <option value="+34">+34</option>
</select>    

<label for="tel">Numéro de téléphone</label>
<input type="text" id="tel" autocomplete="tel-national">

Autocomplétion pour les informations de connexion

Dans un formulaire de connexion, il peut être intéressant de proposer des champs d’autocomplétion pour le nom d’utilisateur et le mot de passe.

Visuel

Code HTML

<label for="login">Votre identifiant <span>(adresse e-mail, numéro de téléphone ou nom d’utilisateur)</span></label> 
<input type="text" id="login" autocomplete="username">

<label for="mot-de-passe">Votre mot de passe</label> 
<input type="password" id="mot-de-passe" autocomplete="current-password">

Si le nom d’utilisateur est une adresse mail, on peut forcer le type du champ input à email.

<label for="login">Votre identifiant <span>(adresse e-mail, numéro de téléphone ou nom d’utilisateur)</span></label> 
<input type="email" id="login" autocomplete="username">

<label for="mot-de-passe">Votre mot de passe</label> 
<input type="password" id="mot-de-passe" autocomplete="current-password">

Suggestion de saisie de valeur

Cette implémentation permet de proposer des valeurs pré-définies à l’utilisateur. Pour autant, celui-ci pourra tout de même renseigner une valeur qui n’est pas proposée au moment où il commence à remplir le champs.
Cette implémentation de fait de la manière suivante :

  • un attribut list posé sur le champs input et faisant référence à l’id de l’élément datalist ;
  • un élément datalist contenant autant d’éléments option qu’il a y de propositions de saisie.

Visuel

Choix suggéré : blanc, bleu, jaune, noir, rouge, vert, violet

Code HTML

<label for="couleur">Votre couleur préférée</label>
<input name="couleur" id="couleur" list="listeCouleurs" value="">
    <datalist id="listeCouleurs">
        <option>Blanc</option>
        <option>Bleu</option>
        <option>Jaune</option>
        <option>Noir</option>
        <option>Rouge</option>
        <option>Vert</option>
        <option>Violet</option>
    </datalist>

astuce

Des exemples sont proposés dans la rubrique Motifs de conception - Formulaires - Suggestion de remplissage.