7. FORMULAIRES
Table des matières |
|---|
7.1 Intitulés et champs
7.1.1 Utiliser la balise <label> ainsi que les attributs « for » et « id » pour associer les champs à leur intitulé
Chaque champ de formulaire doit être associé à un intitulé.
Pour cela, procéder de la sorte :
Utiliser <label> pour baliser chaque intitulé.
Ajouter un attribut « for » sur chaque balise <label> ainsi qu’un attribut « id » sur chaque champ.
Renseigner avec une valeur identique les attributs « id »et « for » de chaque couple intitulé/champ.
<label for="nom">Votre nom</label> <input type="text" id="nom" name="nom" /> […] <label for="annee-naissance">Votre année de naissance</label> <select id="annee-naissance" name="annee-naissance"> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> […] </select>
REMARQUES
Parfois, certains champs n’ont pas d’intitulé visible. Dans cette situation, trois choix s'offre à vous :
Utiliser l’attribut « title ». Au survol du tableau, le « title » sera lu.
Utiliser l'attribut « aria-label ». Lu seulement par le lecteur d'écran.
Utiliser la balise <label> avec le couple d'attributs « for » et « id » en cachant par CSS la balise.
<input type="text" title="Votre recherche" name="recherche" />
À noter que chaque choix ne doit jamais être utilisé en même temps. Sinon, l'information dite par le lecteur d'écran serait dédoublée.
La balise <label> précède toujours le champ de saisie auquel il est associé.
ATTENTION
L'attribut « placeholder » ne fait pas office d'étiquette, donc ne peut remplacer la balise <label> ou les attributs « title » et « aria-label ». Il est uniquement à réserver pour des aides à la saisie secondaires.
<input id="code-postale" type="text" placeholder="X0X 0X0">
RESSOURCES
Voir aussi Prévoir des intitulés clairs (Conception graphique)
7.1.2 Intégrer les informations utiles à la saisie directement dans les balises <label>
Les informations utiles à la saisie doivent être intégrées directement dans les balises <label> .
C’est notamment le cas :
Des mentions « Requis ».
Des indications qui permettent de connaître le format de saisie attendu, du type « JJ/MM/AAAA » pour un format de date. P.-S. Il peut aussi se retrouver à l’intérieur de l’attribut « placeholder » du champ texte.
Des indications qui permettent de connaître le type et le poids maximal autorisé pour l’envoi de fichiers.
Etc.
<p>Les champs marqués d'un astérisque (*) sont requis.</p> <label for="nom">Votre nom *</label> <input type="text" id="nom" name="nom" /> […] <label for="numero-client tel"> Votre numéro de client téléphone <input type="text" id="numero-client tel" name="numero-client tel" /> <em>Par exemple : 76432-BT-VZ 514 CCC-CCCC, 819 CCC-CCCC</em> </label>
Pour les champs obligatoires, ils doivent intégrer l’attribut required ou aria-required=”true”.
<label for="email">Votre courriel (requis)</label> <input type="text" id="email" name="courriel" required />
<input type="checkbox" id="conditions" aria-required="true" /> <label for="conditions"> J'ai lu et j'accepte les conditions générales de vente (requis) </label>
REMARQUES
Parfois, les messages d’erreur sont affichés au niveau de chaque champ. Dans ce cas, ils doivent également être intégrés dans les <label> associés.
<p>Les champs marqués d'un astérisque (*) sont requis.</p>
[…]
<label for="email">
Votre adresse email *
<input type="text" id="email" name="email" placeholder="Ex: exemple@domaine.fr"/>
<span class="erreur">
Veuillez renseigner votre adresse email (format attendu : exemple@domaine.fr).
</span>
</label>
ASTUCES
En complément du message d’erreur, une bonne pratique d’accessibilité consiste à ajouter, lorsque la soumission du formulaire a été faite, l'attribut aria-invalid="true" sur le ou les champs qui n'ont pas été remplis.
<label for="email">Votre courriel (requis)</label> <input type="text" id="email" name="courriel" required aria-invalid="true"/>
PS : Ne pas oublier d'enlever ou de donner la valeur "false" à l'attribut aria-invalid lorsque le champ devient valide.
Une autre bonne pratique d'accessibilité consiste à focusser l'usager sur le champ mal remplis. De cette façon, le lecteur d'écran pourra reprendre sa lecture à l'endroit où il y a invalidité et cela permet aux personnes naviguant par clavier de se retrouver rapidement au bon endroit pour remplir le champ.
Exemple : https://ici.radio-canada.ca/premiere/emissions/les-eclaireurs/ecrivez-nous
ATTENTION
Dès qu'un champ est obligatoire, la mention suivante devrait précéder le formulaire :
Les astérisques (*) indiquent les champs que vous devez remplir pour pouvoir poster ce formulaire.
Si tous les champs sont obligatoires, une mention doit apparaître au début du formulaire, positionnée en haut du premier champ, avec le symbole ou le pictogramme qui signale un champ obligatoire. Dans ce cas, l'astérisque n'est donc pas requis au niveau des champs du formulaire (par contre l'attribut required ne doit pas être oublié).
<p>Tous les champs du formulaire sont requis.</p> […]
RESSOURCES
Voir aussi Les formulaires (Design graphique) :
7.2 Regroupement et tri des informations
7.2.1 Regrouper et titrer les champs de même nature avec les balises <fieldset> et <legend>
Lorsqu’un formulaire propose plusieurs groupes de champs dont certains ont des intitulés identiques, utiliser les balises <fieldset> et <legend>.
Par exemple :
<fieldset> <legend>Participant 1</legend> <label for="prenom-1">Prénom</label> <input type="text" id="prenom-1" name="prenom-1" /> <label for="nom-1">Nom</label> <input type="text" id="nom-1" name="nom-1" /> […] </fieldset> <fieldset> <legend>Participant 2</legend> <label for="prenom-2">Prénom</label> <input type="text" id="prenom-2" name="prenom-2" /> <label for="nom-2">Nom</label> <input type="text" id="nom-2" name="nom-2" /> […] </fieldset>
REMARQUES
Une bonne pratique d’accessibilité consiste à utiliser également les balises <fieldset> et <legend> lors de l’intégration de listes de boutons radio ou de cases à cocher dans la page.
Par exemple :
<fieldset>
<legend>Civilité</legend>
<ul>
<li>
<label for="madame">
<input id ="madame" type="radio" name="civilite" value="Mme" />
Madame
</label>
</li>
<li>
<label for="monsieur">
<input id ="monsieur" type="radio" name="civilite" value="M." />
Monsieur
</label>
</li>
</ul>
</fieldset>
ATTENTION
Les balises <fieldset> et <legend> ne sont à utiliser que lorsque plusieurs groupes de champs disposent d’intitulés identiques. Par exemple :
Une série de questions sur une même page avec comme réponses possibles « oui » ou « non ».
Une liste de participants à un évènement avec, à chaque fois, « nom » et « prénom ».
Dans toutes les autres situations :
Ne pas utiliser les balises <fieldset> et <legend> .
Utiliser les balises <h1> à <h6> pour titrer les blocs.
RESSOURCES
Voir aussi Regrouper et trier les champs de même nature (Design graphique)
7.2.2 Ordonner les options de manière logique dans les listes déroulantes
Lorsque des listes déroulantes sont utilisées, les options qu’elles contiennent doivent être ordonnées de manière logique.
L’ordre logique dépend du contexte, mais il peut s’agir notamment :
D’un ordre alphabétique (une liste de langues, par exemple).
D’un ordre numérique (une liste de départements, par exemple).
REMARQUES
Dans une liste présentant les titres d'émissions débutant par un article défini ou indéfini (Le, La, L', Un, Des), le nom suit l'ordre alphabétique, et non l'article. Pour faciliter la lecture et éviter de dénaturer le nom de l'émission, on peut débuter avec l'article. Par exemple, l'émission « La facture » est ordonnée sous F et non sous L.
ASTUCES
Une bonne pratique d’accessibilité consiste à ne pas préfixer le contenu de la balise
Ceci afin de permettre un accès direct à une valeur ou à un groupe de valeurs souhaité, par simple pression d’une touche au clavier (pression sur la touche « I » pour atteindre le pays « Italie », par exemple).
Ainsi :
<select> <option>--Allemagne</option> <option>--Belgique</option> <option>--Espagne</option> <option>--France</option> <option>--Italie</option> </select>
Sera remplacé avantageusement par :
<select title="Liste de pays"> <option>Allemagne</option> <option>Belgique</option> <option>Espagne</option> <option>France</option> <option>Italie</option> </select>
ASTUCES - BONIFICATION
Regrouper les options de même nature avec <optgroup> dans les <select> .
<label for="list-continents">Liste de pays par continents</label>
<select id="list-continents">
<optgroup label="Amérique">
<option>Canada</option>
<option>États-Unis</option>
</optgroup>
<optgroup label="Europe">
<option>Allemagne</option>
<option>France</option>
</optgroup>
</select>
Pour en savoir plus sur cette balise (Nouvelle fenêtre)
CAPTURES D'ÉCRAN
Capture d’écran : Exemple d’un ordre logique par nom d’émission : l’émission La facture se retrouve sous la lettre “F” et non sur la lettre “L”.
7.3 Titre de la page
7.3.1 Mettre à jour la balise <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation
Chaque fois qu’un formulaire renvoie une erreur ou un message de confirmation à la suite du rechargement de la page (excluant les contenus « Single Page Application », SPA), la balise <title> doit être mise à jour.
Par exemple, dans le cas d’une réussite :
<title> Confirmation - Formulaire de contact | [Nom du site] | [Nom de la plateforme] </title>
Et, dans le cas d'une erreur:
<title> Erreur - Formulaire de contact | [Nom du site] | [Nom de la plateforme] </title>
REMARQUES
Dans certaines situations, il n’est pas nécessaire d’ajouter une mention, car le titre de la page affichée après la soumission rend le résultat de l’action évident. Par exemple :
Formulaire de connexion qui envoie vers une page « Profil utilisateur ».
Bouton « Passer à l'étape suivante » qui envoie à l’étape suivante dans un formulaire à étapes multiples.
Formulaire de contact qui envoie une page de prévisualisation.
Etc.
RESSOURCES
Voir aussi Titre de la page (Html et CSS)
7.4 CAPTCHA (systèmes antispam)
7.4.1 Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA
Chaque fois qu’un CAPTCHA graphique est utilisé, indiquer dans son alternative textuelle où se trouve la version non graphique du CAPTCHA.
Souvent, il s’agit d’une version audio, opter alors, par exemple, pour :
<img src="captcha.png" alt="CAPTCHA (image antispam). Si vous n’y avez pas accès, utilisez la version sonore disponible ci-après." />
RESSOURCES