Nouveau Components

Message de statut et message d’alerte

Le message de statut informe l’utilisateur d’un changement survenu dans la page sans interrompre son activité : réussite d’une action, avertissement, erreur, avancement d’un traitement. Il s’affiche au contact du contenu concerné et ne prend jamais le focus clavier. Le message d’alerte en est la forme la plus urgente, réservée aux avertissements et aux erreurs : il interrompt la lecture en cours du lecteur d’écran, sans pour autant déplacer le focus. Lorsqu’une réponse de l’utilisateur est exigée, le message relève d’une boîte de dialogue d’alerte, qui, elle, prend le focus.

Sur cette page

Quand utiliser un message de statut

  • Confirmer une action : enregistrement effectué, filtre appliqué, élément ajouté.
  • Rendre compte d'un résultat : nombre de réponses d'une recherche, avancement d'un traitement.
  • Informer sans urgence : l'utilisateur peut finir sa phrase avant d'entendre le message.

Quand utiliser un message d'alerte

  • Erreur à corriger : une saisie refusée, un formulaire qui ne part pas.
  • Perte de données imminente : session sur le point d'expirer, connexion perdue.
  • Information qui ne peut pas attendre : et seulement dans ce cas, car l'alerte coupe la parole au lecteur d'écran.

Modes d'action

  • Souris : aucun. Les deux messages s'affichent, ils ne se cliquent pas.
  • Clavier : aucun. Aucun des deux ne prend le focus ; celui-ci reste où l'utilisateur travaillait.
  • Lecteur d'écran : le statut est annoncé poliment, à la prochaine pause. L'alerte interrompt immédiatement.

Contenu

  • Une phrase complète : le message est entendu hors de tout contexte visuel, il doit se suffire.
  • Pas de couleur seule : la nature du message est portée par le texte, l'icône et la couleur ne font que redoubler (WCAG 1.4.1).
  • Une consigne dans l'erreur : dire quoi corriger, pas seulement que c'est faux.

Sur cette page

Mots-clés

  • Région live : zone dont la modification est annoncée sans déplacer le focus.
  • aria-live : définit l'urgence de l'annonce. La valeur polite attend une pause, assertive interrompt.
  • aria-atomic : à true, la région entière est relue à chaque modification, et non le seul fragment ajouté.
  • role="status" et role="alert" : raccourcis qui impliquent chacun l'une des deux combinaisons ci-dessous.

Deux écritures pour un même comportement

Chaque démonstration présente les deux écritures côte à côte, pour qu'elles soient comparables : le rôle d'un côté, les deux attributs de l'autre. Elles sont strictement équivalentes, et le script les alimente de la même façon.

  • role="status" équivaut exactement à aria-live="polite" avec aria-atomic="true".
  • role="alert" équivaut exactement à aria-live="assertive" avec aria-atomic="true".
  • On écrit l'un ou l'autre, jamais les deux sur le même élément : deux déclarations redondantes n'apportent rien et deux déclarations contradictoires donnent un résultat imprévisible.
  • Le rôle est la forme courte, à préférer au quotidien. Les attributs écrits en toutes lettres rendent la mécanique lisible, ce qui est utile en formation et en relecture de code.

Message de statut

Annonce polie : le lecteur d'écran termine sa phrase, puis lit le message. C'est le choix par défaut.

  • La démonstration contient deux régions de statut : la première en role="status", la seconde en aria-live="polite" avec aria-atomic="true".
  • Les deux existent dans le HTML dès le chargement, et elles sont vides. Une région insérée au moment de l'annonce n'est pas restituée : le lecteur d'écran ne la surveillait pas (WCAG 4.1.3).
  • On vide la région avant d'écrire, sinon deux actions produisant le même texte ne sont annoncées qu'une fois.
  • Le focus ne bouge pas : l'utilisateur reste maître de sa navigation.

Message d'alerte

Annonce assertive : le lecteur d'écran interrompt ce qu'il disait. À réserver aux cas où l'attente coûte cher.

  • La démonstration contient deux régions d'alerte : la première en role="alert", la seconde en aria-live="assertive" avec aria-atomic="true".
  • Mêmes règles que le statut : régions présentes dès le chargement, vidées avant chaque écriture, aucun déplacement de focus.
  • Une alerte de trop est pire que pas d'alerte : dès qu'elle devient banale, l'utilisateur n'est plus interrompu, il est seulement dérangé.
  • Un message d'erreur de formulaire gagne à être aussi rattaché au champ par aria-describedby : l'annonce est fugace, la description reste.

Lecteur d'écran

  • Ne jamais cumuler le rôle et les attributs sur un même élément : le rôle suffit.
  • Ne jamais masquer la région avec display:none : une région masquée n'annonce rien. Utiliser un masquage accessible.
  • aria-atomic="true" évite qu'un message composé ne soit lu par morceaux.
  • Le texte annoncé est exactement le texte affiché.

Le message ne reçoit pas le focus à son apparition et le conteneur n'est pas focalisable. Seuls les éléments interactifs qu'il contient entrent dans la séquence de tabulation, à leur place dans l'ordre du document. La boîte de dialogue d'alerte suit des règles distinctes, rappelées en fin de tableau.

Interactions clavier du composant Message de statut et message d'alerte
Touche Fonction
Non applicable (conteneur) Le conteneur du message ne reçoit pas le focus et ne répond à aucune touche. L'annonce est assurée par la région live, sans déplacement du focus.
Tab Déplace le focus vers le bouton de fermeture, puis vers le lien ou le bouton d'action du message, dans l'ordre du document.
Shift + Tab Déplace le focus vers l'élément précédent.
Entrée ou Espace Active le bouton de fermeture ou le bouton d'action.
Entrée Active le lien du message.
Échap Sans effet sur un message de statut ou d'alerte. Ferme en revanche une boîte de dialogue d'alerte, le focus revenant alors sur l'élément qui l'avait déclenchée.

Note : dans une boîte de dialogue d'alerte, le focus est placé à l'ouverture sur un élément actif et la tabulation reste contenue dans la boîte de dialogue tant qu'elle est affichée. Ce comportement est propre à ce modèle et ne doit pas être transposé à un message de statut ou d'alerte.