Blackotine

Label et input, syntaxe et accessibilité

L’élément label permet de rattacher une information à un contrôle par le biais d’une étiquette.
En clair, cliquer sur le texte à l’intérieur d’un élément label permet de place le curseur sur l’élément correspondant du formulaire. Il est à la fois question d’ergonomie et d’accessibilité.
Il est donc primordial d’ajouter un élément label pour chaque champs d’un formulaire.

Syntaxe

Deux méthodes existent, pour lier un label au champ correspondant, la relation peut être explicite ou implicite.

Relation explicite :

L’étiquette est définie par l’attribut for dans label et identifiée grâce à l’attribut id du champ de formulaire ciblé.

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

Relation implicite :

Il s’agit d’imbriquer le champ dans la balise label, il n’est donc plus nécessaire de renseigner les attributs for de label et id du champ.

<label>
Nom
<input name="firstname" type="text" />
</label>

Ces deux méthodes sont détaillés dans la documentation du W3C

Accessibilité

Cependant la solution des labels implicites, bien qu’étant parfaitement valide, n’est plus admise car elle n’est pas reconnue par tous les dispositifs d’accessibilité, elle est d’ailleurs proscrite par les normes d’accessibilité WCAG2.0

Voilà, il n’y a donc en fait qu’une seule solution, la relation explicite, et l’autre, bien que fonctionnant, ne doit jamais être utilisée.