FAQ version Beta 0.5
Accessibilité
Comment utiliser l'élément label pour étiquetter les contrôles de formulaire ?
L'élément <label> permet d'attacher une étiquette à chaque champ de formulaire, de façon à ce que tous les dispositifs de rendu (navigateurs, lecteurs d'écran, etc) puissent traduire cette association et indiquer à l'utilisateur à quoi correspond le champ.
Pour cela, il faut utiliser la syntaxe suivante (exemple d'un formulaire de moteur de recherche - label "explicite") :
<label for="mon_id">Chercher :</label>
<input name="mon_id" id="mon_id" type="text" size="30" value="" />
<input type="submit" value="Soumettre" />
L'attribut "for" de l'élément label et l'attribut "id" du contrôle doivent avoir la même valeur.
Les label ne doivent pas être utilisés pour les <input type=submit>, <input type="reset">, <input type="img"> et <button> : ils ont déjà une étiquette grâce aux attributs value ou alt. Mais celle-ci doit alors clairement indiquer la fonction du contrôle (éviter les "OK" et autres "Pouët !").
Attention ! Il existe une autre syntaxe valide en (X)HTML pour l'élément <label> : les labels "implicites". Mais elle ne doit pas être utilisée : elle n'est pas reconnue par tous les dispositifs d'accessibilité, et elle est donc proscrite par les futures normes d'accessibilité WCAG2.0 :
<label>Chercher :
<input name="…" type="text" size="…" value="" />
</label>
Pour cela, il faut utiliser la syntaxe suivante (exemple d'un formulaire de moteur de recherche - label "explicite") :
<label for="mon_id">Chercher :</label>
<input name="mon_id" id="mon_id" type="text" size="30" value="" />
<input type="submit" value="Soumettre" />
L'attribut "for" de l'élément label et l'attribut "id" du contrôle doivent avoir la même valeur.
Les label ne doivent pas être utilisés pour les <input type=submit>, <input type="reset">, <input type="img"> et <button> : ils ont déjà une étiquette grâce aux attributs value ou alt. Mais celle-ci doit alors clairement indiquer la fonction du contrôle (éviter les "OK" et autres "Pouët !").
Attention ! Il existe une autre syntaxe valide en (X)HTML pour l'élément <label> : les labels "implicites". Mais elle ne doit pas être utilisée : elle n'est pas reconnue par tous les dispositifs d'accessibilité, et elle est donc proscrite par les futures normes d'accessibilité WCAG2.0 :
<label>Chercher :
<input name="…" type="text" size="…" value="" />
</label>
Liens complémentaires