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 dautre 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

    <label for="nom">Votre nom</label>
    <input type="text" id="nom" name="nom" />

    <input type="checkbox" name="voiture" id="voiture">
    <label for="voiture">J'ai ma propre voiture</label>
 
    <label for="départ">Station de départ:</label>
    <select name="départ" id="départ">
        <option value="0">Namur</option>
        <option value="1">Liège</option>
    </select>

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

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 for="avis">Donnez-nous votre avis:
    <textarea rows="5" cols="50" id="avis" name="avis">
    </textarea>
  </label>

Attention

• La directive suivante couvre les cas où il n'est pas possible d'associer un label à un champ.
• 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.