7.6. Intégrer les messages d’erreur et les suggestions de correction directement dans les balises <label>

Dans le cas où les messages d’erreur et les suggestions de correction sont positionnés au niveau de chaque champ concerné, alors les intégrer directement dans les balises <label>.

Astuce

En complément du message d’erreur, une bonne pratique d’accessibilité consiste à ajouter aria-invalid="true" dans le champ.

<label for="nom">
   Votre nom *
   <span>Veuillez renseigner votre nom</span>
</label>
<input type="text" id="nom" name="nom" autocomplete="family-name" aria-required="true" aria-invalid="true" />

<label for="email">
   Votre email *
   <input type="email" id="email" name="email" autocomplete="email" aria-required="true" aria-invalid="true" />
   <span>Veuillez respecter le format de l'email (exemple@domaine.fr)</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 le message d’erreur directement dans la balise <label>.

Dans ce cas-là :

  1. Intégrer un attribut id dans la balise englobant le message d’erreur.
  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 du message d’erreur.
<label for="document">
   Ajouter un document à votre dossier
</label>
<input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats erreur" />
<h2>Documents actuellement dans votre dossier</h2>
<ul>
   <li>CV</li>
   <li>Lettre de motivation</li>
</ul>
<p id="erreur">Format de fichier incorrect.</p>
<p id="formats">Formats acceptés : pdf ou doc.</p>

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

Commentaires

Ajouter un commentaire

Tous les champs sont obligatoires.

Haut de page