7.4. Intégrer les aides à la saisie directement dans les balises `<label>`

Les aides à la saisie doivent être intégrées directement dans les balises <label>.

C’est notamment le cas :

Des mentions du type « Champ obligatoire ».
Des indications qui permettent de connaître le format de saisie attendu, du type « jj/mm/aaaa » pour un format de date.
Des indications qui permettent de connaître le type et le poids maximal autorisé pour l’envoi de fichiers.
Etc.

<label for="date">
   Votre date de naissance
   <span>(au format jj/mm/aaaa)</span>
</label>
<input type="date" id="date" name="date" autocomplete="bday" />

<label for="numero">
    Votre numéro de client *
    <input type="text" id="numero" name="numero" aria-required="true" />
    <span>Par exemple : BT-VZ</span>
</label>

Remarque

Dans certains cas, pour des raisons de mise en page particulière par exemple, il n’est pas possible d’intégrer l’aide à la saisie directement dans la balise <label>.

Dans ce cas-là :

Intégrer un attribut id dans la balise englobant l’aide à la saisie.
Renseigner cet attribut id avec une valeur unique.
Intégrer l’attribut aria-describedby dans le champ correspondant.
Renseigner cet attribut aria-describedby en reprenant la valeur de l’attribut id de l’aide à la saisie.

<label for="document">
   Ajouter un document à votre dossier
</label>
<input type="file" id="document" name="document" aria-describedby="formats" />
<h2>Documents actuellement dans votre dossier</h2>
<ul>
   <li>CV</li>
   <li>Lettre de motivation</li>
</ul>
<p id="formats">Formats acceptés : pdf ou doc.</p>

À noter que l’attribut aria-describedby peut recevoir plusieurs id.

Attention

L’attribut placeholder ne doit pas être utilisé pour les aides à la saisie nécessaires à la compréhension des données attendues.

Il peut être utilisé pour des aides à la saisie secondaires, non nécessaires à la compréhension du champ.

Commentaires

Ajouter un commentaire

Mises à jour

10/12/2021: Dans l’encart dédié aux placeholders, reformulation du texte pour plus de clarté et suppression de l’exemple de code.

Haut de page

7.4. Intégrer les aides à la saisie directement dans les balises <label>