Assurez-vous que tous les champs d’un formulaire sont accompagnés d’une instruction claire et correctement placée. Cela permet à tous les visiteurs d’avoir un formulaire à la fois accessible et plus convivial, facilement utilisable par les personnes avec un handicap.
Un formulaire clair aide tous les visiteurs à comprendre ce qu’ils doivent exactement faire.
- Associer des éléments <label> dans HTML à des champs de formulaire a pour avantage de pouvoir sélectionner le champ de saisie en cliquant sur l’instruction
Comment vous y prendre ?
Placez les instructions près de chaque champ de saisie. Elles doivent avoir un contenu clair et correct et placées convenablement dans le formulaire pour être totalement accessible.
Des instructions claires et correctes
Tout le monde apprécie de pouvoir compléter correctement un formulaire web du premier coup. Et c’est souvent encore plus important pour les visiteurs avec un handicap car corriger des fautes peut leur prendre énormément de temps. C’est pourquoi les instructions doivent décrire clairement ce qu’il faut compléter dans le champ de saisie et si celui-ci est obligatoire. Si possible, il faut aussi préciser si la saisie doit respecter certaines exigences. Par exemple, un numéro de téléphone doit se composer de 9 chiffres, et un numéro de GSM de 10 chiffres.
La bonne structure HTML
Les instructions relatives aux champs de saisie doivent être introduites dans le formulaire à l’aide de l’élément <label> du HTML. Quand les instructions sont placées correctement, les technologies d’assistance sont en mesure de les associer aux bons champs de saisie. Les visiteurs qui ne peuvent pas voir le formulaire ou en avoir une vue d’ensemble savent ainsi ce qu’ils doivent compléter dans quel champ. Les lecteurs d’écran lisent par exemple l’instruction au moment où le champ est sélectionné.
Il n’est parfois pas possible d’afficher une instruction près d’un champ, notamment parce que la structure du site ne le permet pas. C’est généralement le cas avec les champs de recherche d’un site web. Il y a alors un champ de saisie avec un bouton de recherche, mais pas d’instructions dans un élément <label> mais dans l’attribut titre du champ de saisie.
Exemples
Une instruction claire décrit exactement ce qu’il faut compléter dans le champ.
- Clair = ‘Votre nom de famille’
- Moins clair = ‘Nom’
Une instruction correctement placée se présente comme suit dans le code HTML. L’attribut for de l’élément <label> associe cet élément au champ de saisie (dans ce cas, l’élément <input>) avec l'id ‘nom de famille’.
<label for="nom de famille">nom de famille</label>
<input type="text" id="nom de famille" />
Lorsqu’il n’y a pas de place pour un élément <label>, il faut se servir de l’attribut title pour donner l’instruction :
<input type="text" title="Entrez votre terme" />
<input type="submit" value="Rechercher" />
Label : texte qu’on ne peut pas changer - instruction
- exemple : entrez votre nom, placez au-dessus d’un champ de saisie
Title : texte qui disparait et qui se trouve dans le champ de recherche
- ex emple: tapez votre recherche
Attribut : ordre à l’ordinateur
Pour les redacteurs
Le rédacteur doit s’assurer que les instructions sont claires et correctes.
Pour les développeurs
Le développeur est responsable du placement correct d’un point de vue technique des éléments <label> pour les instructions relatives à des champs de formulaire.