aria-errormessage

Description

aria-errormessage accepte l’id de l’élément contenant le message d’erreur. Il est utilisé en complément de aria-invalid="true" pour associer explicitement le message d’erreur au champ concerné.

Contrairement à aria-describedby, aria-errormessage est spécifiquement dédié aux erreurs de validation — les technologies d’assistance peuvent le traiter différemment (ton d’urgence, annonce immédiate).

Syntaxe

<input type="text"
       aria-invalid="true"
       aria-errormessage="msg-erreur" />
<p id="msg-erreur">Ce champ est obligatoire.</p>

Exemples

Formulaire avec validation :

<label for="tel">Téléphone</label>
<input type="tel"
       id="tel"
       aria-required="true"
       aria-invalid="true"
       aria-errormessage="tel-err" />
<p id="tel-err" role="alert">
  Format attendu : 06 12 34 56 78 (10 chiffres).
</p>

Activation dynamique :

function afficherErreur(input, messageId, message) {
  input.setAttribute('aria-invalid', 'true');
  input.setAttribute('aria-errormessage', messageId);
  const el = document.getElementById(messageId);
  el.textContent = message;
  el.hidden = false;
}

Notes

Utiliser uniquement avec aria-invalid="true" : aria-errormessage n’a de sens que quand aria-invalid="true" est présent. Retirer les deux attributs quand l’erreur est corrigée.

Différence avec aria-describedby : aria-describedby est pour les descriptions générales ; aria-errormessage est spécifiquement pour les erreurs de validation. Les deux peuvent coexister.

Message visible : le message d’erreur doit être visible dans le DOM (pas masqué visuellement avec display:none).