Critères 11.1 et 11.2 – Libellés associés correctement avec leur champ de formulaire

This post is also available in: English (Anglais)

Les balises <input> doivent avoir un label associé.

Associer techniquement chaque label à son champ de formulaire en évitant les labels dupliqués. 

Éléments de formulaires qui doivent avoir un label :

  • Champs de texte, ex. <input type= »text »>, <input type= »password »> et <textarea>
  • Radio buttons, <input type= »radio »>
  • Checkboxes, <input type= »checkbox »>
  • Select menus, <select>

Les seules exceptions sont:

  • Boutons — ils sont self-labeling
  • Hidden inputs — Contenus avec un attribut type value of hidden (ex type= »hidden »). Ces champs sont cachés et non utilisables pour les utilisateurs d’où l’exception de label.

Afin de permettre aux utilisateurs de lecteurs d’écran de comprendre dans quel champ ils se situent et d’éviter les erreurs de remplissage, il est nécessaire de lier le champ à son label.

Méthodes

  • Créer un label englobant le champ pour créer une association implicite.
  • Associer explicitement le label avec le champ en utilisant les attributs FOR et ID.
  • Utiliser un attribut aria-label.
  • Utiliser un attribut aria-labelledby.

S’assurer finalement que chaque champ est associé à un seul label.

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