État État du widget

`aria-invalid`

Indique qu'un contrôle de formulaire a échoué à la validation. À associer à aria-describedby pointant vers le message d'erreur lisible par l'humain, afin que le lecteur d'écran annonce à la fois l'état invalide et la raison.

Quand l’utiliser

Sur un champ de saisie, une zone de texte, une combobox, une listbox ou tout autre widget de formulaire dont la valeur actuelle a échoué à la validation. Définissez aria-invalid="true" après que l’utilisateur a eu l’occasion de saisir une valeur — généralement lors de la perte de focus ou à la soumission. Le définir dès le premier rendu, avant que l’utilisateur ait saisi quoi que ce soit, est gênant et annonce les champs obligatoires vides comme invalides avant toute interaction.

Associez-le au message d’erreur réel. Le schéma est le suivant :

Afficher un message d’erreur visible avec son propre id.
Définir aria-invalid="true" sur le champ de saisie.
Pointer aria-describedby vers l’id du message d’erreur.

Les lecteurs d’écran annoncent alors à la fois l’état invalide et l’explication : « Email, zone de saisie, entrée invalide, veuillez saisir une adresse email valide ».

Comment le maintenir synchronisé

Les valeurs valides sont "true", "false", "grammar" et "spelling". En pratique, les plus courantes sont "true" et "false". "grammar" et "spelling" sont utilisées par les éditeurs de texte enrichi pour marquer une plage spécifique ; la plupart des flux de travail de formulaires n’en ont pas besoin.

La valeur par défaut est "false" (ou l’attribut peut être omis). Lorsque la validation échoue, définissez "true" et affichez le message d’erreur. Lorsque l’utilisateur corrige le champ, réinitialisez les deux simultanément — remettez aria-invalid à "false" et supprimez ou masquez le message d’erreur.

L’attribut HTML required et la pseudo-classe CSS :invalid fonctionnent indépendamment. aria-invalid est le signal que les lecteurs d’écran consomment ; les autres servent aux navigateurs et à la mise en forme. Maintenez-les synchronisés.

Erreurs fréquentes

Définir aria-invalid="true" avant que l’utilisateur ait eu l’occasion d’interagir avec le champ.
Marquer un champ comme invalide sans aria-describedby ni message d’erreur visible — le lecteur d’écran annonce « invalide » sans explication.
Laisser aria-invalid="true" après que l’utilisateur a corrigé la valeur.
Pointer aria-describedby vers un conteneur vide, de sorte que l’annonce de l’erreur est silencieuse.
Utiliser aria-invalid sur un <fieldset> ou d’autres conteneurs non interactifs — cela n’y a pas de sens.
Se fier uniquement à la couleur pour indiquer l’état d’erreur — aria-invalid aide les lecteurs d’écran ; un libellé ou une icône visible reste nécessaire pour les utilisateurs voyants (WCAG 1.4.1).

Exemple

<label for="email">Adresse email</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Veuillez saisir une adresse email valide.</p>