7.1. Utiliser la balise <label> ainsi que les attributs for et id pour étiqueter les champs avec intitulé visible

Pour étiqueter les champs disposant d’un intitulé visible :

  1. Utiliser <label> pour baliser chaque intitulé.
  2. Ajouter un attribut for sur chaque balise <label> ainsi qu’un attribut id sur chaque champ.
  3. Renseigner avec une valeur unique et identique les attributs for et id de chaque couple intitulé/champ.
<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" />
<label for="pays">Votre pays</label>
<select id="pays" name="pays">
   <option value="belgique">Belgique</option>
   <option value="france">France</option>
   […]
</select>

Attention

Les attributs title et aria-label ne doivent jamais être utilisés pour les champs étiquetés de cette manière.

Remarque

Il est important de prévoir des intitulés identiques pour les champs dont la fonction est identique.

Par exemple, si plusieurs formulaires d’identification sont présents dans le site, ne pas utiliser l’intitulé « Identifiant » pour l’un et « Login » pour l’autre.

Aller plus loin

1 commentaire

  • Par valéry, le 14 janvier 2016 à 22h47.

    Excellent article! Je ne suis pas programmeur, mais j’ai parfaitement compris les explications. Merci.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page