Aide à la saisie

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

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>

Aide à la saisie

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>

Autocomplétion

L’autocomplétion permet de faciliter le remplissage des champs en proposant des valeurs pré-renseignées ou des suggestions de saisie.

Proposition de pré-remplissage avec l’attribut autocomplete

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" ...>

Pour voir la liste complète, consulter la page “input-purpose” du W3C.

Suggestion de saisie de valeur

Cette implémentation permet de proposer des valeurs pré-définies à l’utilisteur. 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>

Gestion des erreurs

Titre de la page

En cas d’erreur, le titre de la page HTML sera modifiée en conséquence.

<head>
<title>Erreur - Formulaire d'envoi de votre commande</title>
...
</head>

Message d’erreur global

Un message d’erreur global peut être implémenté au début du formulaire  il aura alors le rôle role="alert".
Cette zone prévue pour recevoir le message d’alerte global sera implémentée à vide dans la formulaire puis peuplée au moment du retour d’erreur.

<form>
<div role="alert"></div>
...
</form>

astuce

Dans la rubrique Motifs de conception - Message d'alerte, des informations supplémentaires sont proposées sur l'implémentation d'un élément portant le rôle alert.

Message d’erreur contextuel (associé au champ en erreur)

La gestion des erreurs doit suivre les règles suivantes :

  • Le message d’erreur est implémenté accolé au champ en erreur ;
  • Le message d’erreur explique les raisons de l’erreur de manière claire et sans ambiguïté ;
  • Le message d’erreur rappelle ce qui est attendu dans le champ et donne des suggestions de correction (exemple : Veuillez renseigner un email valide du type nom@domaine.fr) ;
  • Le message d’erreur est relié au champ grâce à l’attribut aria-labelledby pour pouvoir être restitué par les logiciels de synthèse vocale 
  • Le focus clavier est mis sur le premier champ en erreur afin de pouvoir parcourir tout le formulaire ;
  • Le champ en erreur (et/ou son label) n’est pas signalé uniquement par la couleur (le champ en erreur pourra alors avoir une bordure plus grosse par exemple et son libellé écrit en gras) ;
  • Le champ en erreur possède l’attribut aria-invalid="true"  ;
  • Le message d’erreur pour un champ obligatoire qui n’est pas renseigné est contextualisé et unique (exemple : Le champ “Nom” est obligatoire).

Exemple de code HTML

<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" autocomplete="email" required aria-invalid="true"  aria-labelledby="erreurEmail" />
    <div id="erreurEmail">
        <p id="emailObligatoire">Le champ email est obligatoire.</p>
        <p id="emailFormatage">Veuillez renseigner un email valide (prenom.nom@domaine.com)</p>
    </div>

Gestion du succès

À l’issue de la soumission du formulaire, si celle-ci s’est bien passée, il faut afficher un message de notification pour en informer l’utilisateur. Ce message peut reprendre une partie des données renseignées dans le formulaire. Ce message de succès / confirmation s’implémente via le rôle aria role="status"

<div role="status">
<h2>Succès</h2>
<p>Votre demande a bien été envoyée ; vous recevrez bientôt un mail de confirmation à l'adresse suivante : martin@gmail.com.</p>
</div>