Formulaires - Étiquettes et champs obligatoires - Démonstrations

Étiquettes de champ de formulaires

Conforme : Relation for id

<label for="prenom">Votre prénom</label>
<input type="text" id="prenom" />

Non conforme : Aucune relation for id

<label>Votre prénom</label>
<input type="text" />
/**Il n'y aucune relation HTML entre le label et son champ.**/

Conforme : Labels implicites et relation for id

<label for="prenom">Votre prénom
  <input type="text" id="prenom" />
</label>

Non conforme : Labels implicites sans relation for id

<label>Votre prénom
  <input type="text" />
</label>
/**Les labels implicites ne sont pas des labels conformes.**/

Conforme : Label dans l'attributtitle

<input type="text" title="Saisissez un mot clé à rechercher" />
<input type="submit" value="Rechercher" title="Rechercher dans le site" />

Non conforme : Aucun label sur le champ de formulaire

<input type="text"/>
<input type="submit" value="Rechercher" title="Rechercher dans le site" />
/**Le champ de saisie n'a aucune étiquette.**/

Conforme : Label via aria-labelledby

Nom du site 

<p id="sitename">Nom du site</p>
<input type="text" aria-labelledby="sitename" />

Non conforme : Label via aria-labelledby et mauvais id référencé

Nom du site 

<p id="sitename">Nom du site</p>
<input type="text" aria-labelledby="site" />
/**L'identifiant référencé par la propriété aria-labelledby n'est pas le bon identifiant.**/

Conforme : Label via aria-label avec étiquette visible

Nom du site 

<p>Nom du site</p>
<input type="text" aria-label="Nom du site" />

Non conforme : Label via aria-label sans étiquette visible

<p class="hidden">Nom du site</p>
<input type="text" aria-label="Nom du site" />.hidden{
 display:none;
}/**La propriété aria-label doit toujours être doublée d'une étiquette visible.
Ici l'étiquette est cachée.**/