Formulaires - Aides et contrôles de saisie - Démonstrations

Champs obligatoires

Conforme : Indication dans le label

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

Conforme : Indication avant le formulaire

Les champs obligatoires sont précédés d'une étoile *

<p>Les champs obligatoires sont précédés d'une étoile *</p>
<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" />

Non conforme : Indication après le formulaire

Les champs obligatoires sont précédés d'une étoile *

<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" />
<p>Les champs obligatoires sont précédés d'une étoile *</p>

La mention du champ obligatoire est située après le formulaire

Conforme : required doublé d'une indication visuelle

Les champs obligatoires sont précédés d'une étoile *

<p>Les champs obligatoires sont précédés d'une étoile *</p>
<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" required />

Non conforme : required sans indication visuelle

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

required doit être doublé d'une indication visuelle

Conforme : aria-required doublé d'une indication visuelle

Les champs obligatoires sont précédés d'une étoile *

<p>Les champs obligatoires sont précédés d'une étoile *</p>
<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" aria-required="true" />

Non conforme : aria-required sans indication visuelle

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

aria-required doit être doublé d'une indication visuelle

Indication de format

Conforme : L'aide à la saisie est reliée au champ via aria-describedby

cm


<label for="taille">Quel est votre taille ?</label>
<input id="taille" aria-describedby="help-title" type="text" />
<span id="help-taille"><abbr title="centimètres">cm</abbr></span>

Non conforme : L'aide à la saisie n'est pas reliée au champ

cm


<label for="taille">Quel est votre taille ?</label>
<input id="taille" type="text" />
<span><abbr title="centimètres">cm</abbr></span>

Conforme : L'aide à la saisie est dans l'étiquette


<p><label for="mail">Votre adresse mail (nomprenom@domain.com)</label>
<input type="text" id="mail""/></p>

Non conforme : L'aide à la saisie est après le champ de formulaire

(nomprenom@domain.com) 


<p><label for="mail">Votre adresse mail</label>
<input type="text" id="mail"/><span> (nomprenom@domain.com) </span></p>