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 :

<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à :

  1. Intégrer un attribut id dans la balise englobant l’aide à la saisie.
  2. Renseigner cet attribut id avec une valeur unique.
  3. Intégrer l’attribut aria-describedby dans le champ correspondant.
  4. 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 est uniquement à réserver pour des aides à la saisie secondaires.

<input type="search" aria-label="Votre recherche" placeholder="Saisissez vos mots-clés..." />

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page