alert
Région live qui transmet un message urgent et temporellement sensible. Les lecteurs d'écran l'annoncent immédiatement en interrompant la parole en cours. À utiliser avec parcimonie — réservez aux vraies erreurs et avertissements ; l'abus provoque une fatigue des technologies d'assistance.
Quand l’utiliser
Pour les messages qui interrompent réellement l’utilisateur — une soumission de formulaire échouée, une session sur le point d’expirer, une connexion perdue. role="alert" est équivalent à aria-live="assertive" plus aria-atomic="true", ce qui signifie que le lecteur d’écran arrête ce qu’il annonce et lit l’alerte en priorité.
À utiliser avec parcimonie. Les annonces assertives interrompent la tâche en cours de l’utilisateur ; en déclencher une pour chaque champ sauvegardé ou action réussie est néfaste. Pour les changements d’état non urgents, utilisez plutôt role="status" (aria-live="polite").
La règle la plus difficile à respecter : l’élément alert DOIT exister dans le DOM avant l’insertion du message, et le contenu DOIT être ajouté (et non basculé depuis un état masqué) pour que l’annonce se déclenche. Insérer <div role="alert">Erreur</div> de toutes pièces n’est pas fiable selon les lecteurs d’écran. Le pattern sûr : rendre un <div role="alert"></div> vide au chargement de la page, puis mettre à jour son contenu texte quand une alerte se produit.
Quand utiliser alert vs. status
Utilisez role="alert" | Utilisez role="status" |
|---|---|
| Erreurs de validation de formulaire | « Article ajouté au panier » |
| Session sur le point d’expirer | Nombre de résultats de recherche mis à jour |
| Connexion perdue | Indicateur « Enregistré » |
| Paiement échoué | Chargement terminé |
Erreurs courantes
- Élément alert ajouté au DOM après le message — de nombreux lecteurs d’écran n’annoncent pas.
- Basculer
hiddensur une alerte pré-remplie. C’est le changement du contenu texte qui déclenche l’annonce ; le seul basculement de visibilité peut ne pas suffire. - Utiliser
role="alert"pour des statuts de routine. Noie l’utilisateur sous les interruptions. - Plusieurs alertes insérées rapidement — les messages ultérieurs se mettent en file derrière les premiers, parfois pendant des dizaines de secondes.
- Message d’alerte qui ne nomme pas le champ ni la cause — « Erreur » seul est inutile. « L’adresse e-mail est requise. » est actionnable.
- Placer
role="alert"sur un conteneur encapsulant un formulaire, puis s’attendre à ce que les modifications internes soient annoncées. Seuls les changements du texte propre à l’élément alert déclenchent des annonces.
Exemple
<!-- Rendre ceci vide au chargement de la page -->
<div role="alert" id="formErr"></div>
<script>
// En cas d'échec de soumission :
document.getElementById('formErr').textContent =
'Email address is required.';
</script>