Un message d'erreur relié — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 8)

Un message d'erreur relié

Accessibilité · niveau 2

Énoncé

Dans le formulaire de création de compte, l'utilisateur a tapé « karim.exemple.fr » comme adresse.

Écrire le HTML du champ et de son message d'erreur pour qu'un lecteur d'écran annonce le problème et la façon de le corriger.
Pourquoi un simple contour rouge autour du champ ne suffit-il pas ?
Pourquoi le message ne doit-il pas être placé dans le placeholder ?

Corrigé

On garde l'étiquette, on signale l'erreur par aria-invalid et on relie le message par aria-describedby :


<p>
  <label for="courriel">Adresse électronique</label>
  <input id="courriel" name="courriel" type="email" autocomplete="email" required
         aria-invalid="true" aria-describedby="erreur-courriel">
  <span id="erreur-courriel">Erreur : l’adresse doit contenir un « @ », par exemple nom@exemple.fr.</span>
</p>

Le lecteur d'écran annonce « Adresse électronique, zone d'édition, obligatoire, entrée invalide », puis le message, qui dit à la fois ce qui manque et à quoi doit ressembler une adresse.

La couleur n'est pas perçue par un lecteur d'écran, et mal perçue par un daltonien ; un contour ne dit pas non plus ce qui est faux.
Le placeholder disparaît dès que le champ contient du texte (or le champ en erreur en contient), son contraste est faible, et tous les lecteurs d'écran ne le lisent pas.