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

3 commentaires

  • 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

  • Par Claire Bizingre, le 3 juillet 2017 à 12h58.

    Bonjour,

    Beaucoup de plugins en WordPress génèrent le code suivant :

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

    qui ne respecte pas les critères du RGAA puisque for et id ne sont pas spécifiés. Mais si on écoute ce code avec NVDA, JAWS et VoiceOver, l’étiquette est vocalisée car le champ est dans la balise <label>.
    Le code de ces plugins est souvent figé sans possibilité propre de le modifier. C’est le cas du plugin ContactForm 7 pour les boutons radio et checkbox.
    Est-ce que l’on peut le garder ainsi, en expliquant dans une page « accessibilité » par exemple que les étiquettes sont vocalisées malgré la non validation du critère 11.1 ?

    Qu’en pensez-vous ?

    Répondre

    • Par Johan Ramon, le 4 juillet 2017 à 9h14.

      Bonjour Claire,

      Merci pour ton commentaire.

      Effectivement, le test 11.1.2 du RGAA impose que les balises <label> intègrent un attribut for reprenant la valeur de l’attribut id de leur champ correspondant.

      Toutefois et sauf erreur de ma part, toutes les combinaisons « modernes » de lecteur d’écran / navigateur (celles de la base de référence du RGAA, entre-autres) restituent bien les labels implicites (champ de formulaire directement intégré au sein de la balise <label>). Même sans attribut for.

      (De mémoire, à l’époque, les labels implicites sans attribut for posaient des problèmes de restitution seulement avec la combinaison Internet Explorer 6 / Jaws.)

      Par conséquent, je vois deux options pour ton cas de figure :

      • Soit passer par un script JS de surcharge qui viendra ajouter au chargement de la page les attributs for correctement renseignés dans les balises <label>. Mais je t’avoue que cette solution me paraît un peu lourde en vue de simplement valider un critère (pour de la conformité).
      • Soit, comme tu le mentionnes, indiquer ce léger manque dans une page « Accessibilité ». Perso, c’est ce que je ferais. ;)

      Johan

      Répondre

Ajouter un commentaire

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

Haut de page