4.1.1 Les labels et éléments des formulaires sont intimement liés

Les formulaires sont constitués d'une part de champs (texte, liste déroulante, bouton radio) et d'autre part d'étiquettes ou labels qui expliquent le contenu du champ.

Faites en sorte que la fonction de chaque champ du formulaire soit directement et clairement identifiable par son étiquette.

Pourquoi?

Les étiquettes sont d'une grande aide pour les utilisateurs de lecteurs d'écran. Grâce à la construction label/for, l'intitulé correct est lu lorsque le curseur se place sur un champ du formulaire.

L'utilisation d'étiquettes présente également des avantages pour les utilisateurs de la souris: il suffit de cliquer sur l'étiquette pour sélectionner un bouton radio ou pour déplacer le curseur vers un champ texte ou une liste déroulante. C'est très apprécié par les visiteurs qui ont des difficultés motrices.

En pratique

Vous devez vous assurer que:

  • Chaque champ possède une étiquette (label) qui lui est propre.
  • Chaque étiquette exprime clairement la fonction du champ qui lui est associé.
  • Les couples étiquette-champ sont indissociables: chaque champ du formulaire a un attribut id qui a une valeur unique. Cette valeur est répétée dans l'attribut for de la balise label.

Exemple d'utilisation correcte du label

Il est également permis d'inclure le champ de saisie et son étiquette à l'intérieur des balises <label> et </label>

Exemple d'inclusion du champ de saisie dans la balise label

<label>Donnez-nous votre avis:
<textarea rows="5" cols="50" name="avis"></textarea></label>

Attribut value

Il n'est pas permis d'utiliser l'attribut value à la place du label:

Exemple (pas bon)

seulement attribut value, pas de label

<input type="text" value="Nom" />
<input type="text" value="E-mail" />

Exemple (OK)

champs avec label et value

<label for="naam">Nom: <input id="naam" type="text" value="Nom" /></label>
<label for="email">E-mail: <input id="email" type="text" value="E-mail" /></label>

Attribut placeholder

L'attribut HTML5 placeholder n'est pas non plus une alternative suffisante au label:

Exemple (pas OK)

champs avec attribut placeholder uniquement

<input type="text" placeholder="Nom" />
<input type="text" placeholder="E-mail" />

Exemple (OK)

champs avec placeholder et label

<label for="naam">Nom: <input id="naam" type="text" placeholder="Jean Dupont"></label>
<label for="email">E-mail: <input id="email" type="email" placeholder="jean@exemple.be"></label>

Attention

  • La directive suivante (4.1.2 Les champs sans label sont décrits par un tooltip) couvre le cas où il n'est pas possible d'associer un label à un champ, ce qui est plutôt exceptionnel.
  • Les boutons d'envoi (<input type="submit">) ne doivent pas avoir de label. L'intitulé du bouton (le texte précisé dans l'attribut value) joue ce rôle.
  • Nous déconseillons l'usage de listes déroulantes à sélection multiple (balise select avec attribut multiple). En effet, pour sélectionner plusieurs éléments dans la liste, l'utilisateur doit maintenir la touche "ctrl" enfoncée. Il vaut mieux utiliser une liste de cases à cocher.

Recommandations

  • Pour les champs de texte et les listes déroulantes, placez de préférence le label juste au-dessus du champ.
  • Pour les zones d'option (boutons radio) ou cases à cocher, placez de préférence le label devant le champ.

comment tester

Une manière simple de vérifier l'utilisation de labels est de cliquer sur le texte de description du champ. S'il ne se passe rien, c'est que, soit l'élément label n'a pas été utilisé, soit les valeurs des attributs for du label et id du champ ne se correspondent pas. Dans ce cas, le formulaire n'est pas conforme à cette directive.

Lorsque le label est correctement associé à son champ, et que l'on clique dessus

  • le curseur clignotant sera automatiquement placé dans le champ de texte correspondant input type="text"outextarea
  • une case à cocher (input type="checkbox") sera automatiquement cochée ou décochée
  • un bouton radio (input type="radio") sera sélectionné
  • le focus se placera sur le premier élément d'une liste déroulante (select)

Vous pouvez également utiliser Firebug pour vérifier l'utilisation d'attributs for et id correspondants dans le code.