enum Valeurs : true,false,grammar,spelling

aria-invalid

Indique qu'une valeur saisie ne satisfait pas au format attendu ou aux contraintes de validation.

Description

aria-invalid signale aux technologies d’assistance qu’une valeur est erronée. Les valeurs possibles sont :

  • false (défaut) — aucune erreur
  • true — valeur invalide
  • grammar — erreur grammaticale (dans un éditeur de texte)
  • spelling — erreur d’orthographe

Syntaxe

<input type="email" aria-invalid="true" aria-describedby="email-err" />
<p id="email-err" role="alert">Format invalide. Exemple : nom@domaine.fr</p>

Exemples

Validation à la soumission :

<label for="cp">Code postal</label>
<input type="text" id="cp"
       aria-required="true"
       aria-invalid="false"
       aria-describedby="cp-erreur" />
<p id="cp-erreur" hidden role="alert">Le code postal doit contenir 5 chiffres.</p>

<script>
  function valider(input) {
    const valide = /^\d{5}$/.test(input.value);
    input.setAttribute('aria-invalid', String(!valide));
    document.getElementById('cp-erreur').hidden = valide;
  }
</script>

Notes

Combiner avec aria-describedby : toujours indiquer le message d’erreur via aria-describedby pour que le contenu de l’erreur soit annoncé par les lecteurs d’écran.

Combiner avec role="alert" : si le message d’erreur apparaît dynamiquement, lui ajouter role="alert" assure qu’il sera annoncé immédiatement.

Validation progressive : n’activer aria-invalid="true" qu’après une tentative de soumission ou un départ du champ (événement blur) — éviter la signalisation en temps réel qui peut être perturbante.

Support navigateurs