Nouveau Components

Snackbar / Message toast

Le snackbar, ou message toast, affiche un message court et temporaire en marge de l’écran, généralement après une action de l’utilisateur. Il confirme une opération ou transmet une information brève sans interrompre la tâche en cours. Le message apparaît automatiquement, reste affiché un temps limité, puis disparaît sans intervention. Il ne prend pas le focus. Sa disparition automatique en fait un canal secondaire : l’information qu’il porte doit toujours rester accessible ailleurs.

Sur cette page

Quand utiliser un message toast

  • Confirmer une action réussie : enregistrement effectué, élément ajouté, lien copié. L'utilisateur poursuit sans rien fermer.
  • Signaler un traitement en arrière-plan : une synchronisation terminée, un envoi parti.
  • Offrir une annulation immédiate : « Élément supprimé, Annuler », à condition de laisser le temps d'agir.

Quand ne pas en utiliser

  • Pour une erreur bloquante : un message qui disparaît ne convient pas à une information dont l'utilisateur a besoin pour corriger. Utiliser un message d'alerte persistant.
  • Pour une décision : dès qu'il faut répondre, c'est une boîte de dialogue.
  • Pour un texte long : le toast se lit en une seconde. Au-delà de deux lignes, changer de composant.

Modes d'action

  • Souris : le toast ne vole jamais le focus. Le survol met la disparition en pause.
  • Clavier : le toast ne s'insère pas dans l'ordre de tabulation, sauf s'il contient une action, qui devient alors un bouton atteignable.
  • Lecteur d'écran : le texte est annoncé par une région live polie, sans interrompre la lecture en cours.

Contenu

  • Une phrase : ce qui s'est passé, au passé composé. « Modifications enregistrées ».
  • Une durée suffisante : aucun référentiel n'en fixe le minimum. La règle Ipedis est de six secondes au moins, plus une demi-seconde par mot, et vingt secondes au plus, le compte étant suspendu au survol et à la prise de focus (WCAG 2.2.1).
  • Pas d'information unique : ce que dit le toast doit rester retrouvable ailleurs dans la page.

Sur cette page

Mots-clés

  • Message toast : message bref, affiché en surimpression, qui disparaît seul.
  • role="status" : région live polie. Elle attend une pause avant d'annoncer et n'interrompt pas l'utilisateur.
  • aria-atomic : fait relire la région entière à chaque modification, et non le seul fragment ajouté.
  • Délai d'effacement : temps avant disparition. Il relève du critère 2.2.1 sur les limites de temps, qui ne donne aucun chiffre pour les toasts.

Décomposition des composants

La démonstration montre un toast qui apparaît, s'annonce et disparaît sans perturber la navigation.

La région live

  • Elle existe dans le HTML dès le chargement, et elle est vide. Une région créé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 : sans cela, deux actions successives produisant le même texte ne seraient annoncées qu'une fois.
  • Le toast est poli, jamais assertif : il confirme, il n'alerte pas.

La disparition

  • Le minuteur repart de zéro à chaque nouveau message, et il est annulé quand le composant est masqué.
  • Le délai est calculé sur la longueur du message, six secondes au minimum et vingt au maximum. Aucun référentiel ne fixe ce minimum : WCAG 2.2.1 ne donne aucun chiffre pour les toasts, la question reste ouverte au W3C et le RGAA 13.1 renvoie au même critère. C'est donc une règle maison, assumée comme telle.
  • Le survol et le focus mettent le compte à rebours en pause : l'utilisateur qui lit lentement n'est pas pris de vitesse (WCAG 2.2.1).
  • Le contenu du toast n'est jamais la seule trace de l'information : la page en garde une ailleurs.

Lecteur d'écran

  • Le focus ne se déplace jamais vers le toast : l'utilisateur reste où il travaillait.
  • role="status" suffit ; y ajouter aria-live="polite" est redondant mais sans risque, l'inverse serait contradictoire.
  • Si le toast porte une action, celle-ci est un bouton réel, atteignable au clavier, et la durée d'affichage est allongée en conséquence.
  • Le texte annoncé est exactement le texte affiché : pas de version abrégée réservée à la voix.

Un snackbar de message simple ne reçoit pas le focus et n'est associé à aucune interaction clavier. Seules les variantes comportant un bouton d'action ou de fermeture entrent dans la séquence de tabulation.

Interactions clavier du composant Snackbar / Message toast
Touche Fonction
Non applicable (message simple) Le snackbar sans élément interactif ne reçoit pas le focus et ne répond à aucune touche. L'annonce est assurée par la région live associée.
Tab Lorsque le snackbar contient un bouton d'action ou de fermeture, déplace le focus vers ce bouton. La temporisation est alors suspendue.
Entrée ou Espace Active le bouton d'action ou de fermeture du snackbar.
Échap Ferme le snackbar quand le focus est à l'intérieur. Le focus revient alors sur l'élément qui avait déclenché l'action. Le raccourci n'est pas écouté sur le document : il serait volé aux autres composants de la page.

Note : un snackbar à disparition automatique ne peut contenir un élément focalisable qu'à une condition : que le compte à rebours soit suspendu tant que cet élément a le focus, sinon le bandeau s'effacerait sous le focus et celui-ci retomberait sur le document. Une action que l'utilisateur peut avoir besoin d'atteindre, une annulation par exemple, ne se met pas sous minuteur du tout, ou reste réalisable ailleurs dans l'interface.