Dernière mise à jour : 4 mai 2026
L’avis s’affiche à un emplacement stratégique de la page pour communiquer une information ayant une répercussion directe sur l’expérience utilisateur.
- Guide d'utilisation
- Design
- Accessibilité
Utilisation
L’avis communique une information importante en lien avec le contenu de la page. Il s’insère dans le corps de celle-ci au moment opportun du parcours pour accompagner le contenu auquel il est lié.
Il peut s’agir d’un message qui a un impact immédiat sur l’expérience utilisateur ou d’une rétroaction à la suite d'une action de l’utilisateur ou de l’utilisatrice.
L’avis doit être modifié si l’état de la situation change et retiré dès que le message n’est plus pertinent ou d’actualité.
2. Titre (optionnel)
3. Message
4. Bouton Afficher les détails (optionnel)
5. Bouton Fermer (optionnel)
Choisir le bon type d’avis
Il existe différents types d’avis qui se distinguent visuellement les uns des autres par leur icône et leur couleur d’arrière-plan. Les avis sont statiques ou rétroactifs.
Avis statiques
Les avis statiques se trouvent déjà sur la page dès l’arrivée de l’utilisateur ou l’utilisatrice. Leur fonction principale est de communiquer une information sur l'état d’un système ou d’un service.
Informationnel
Annonce des nouveautés ou des changements apportés à la page. Selon le contexte, un bouton pour fermer l’avis peut être ajouté.
Avertissement
Communique l’état d’un service, un changement majeur ou une modification importante susceptible d’avoir un impact sur l’expérience utilisateur et qui peut nécessiter une action à effectuer.
Alerte critique
Indique les mesures à prendre pour minimiser les risques ou éviter un danger dont l’impact sur l’expérience utilisateur est majeur.
Avis rétroactifs
Les avis rétroactifs apparaissent à la suite d’une action de l’utilisateur ou de l’utilisatrice pour communiquer le résultat de cette action.
Succès
Confirme la réussite de l’action accomplie, par exemple l'inscription à une infolettre ou l’envoi d’un formulaire. Un bouton pour fermer l’avis peut être ajouté.
Erreur
Signale le blocage de l’action en raison d'une erreur. Un hyperlien pour proposer une action à effectuer peut être ajouté à l’avis. Voir l’avis d’erreur d’un formulaire.
Placement
L'emplacement de l’avis dans la page est flexible, mais doit être choisi stratégiquement en fonction du besoin de communication auquel il répond. L’avis s’adapte à la structure de la page et, sa largeur, au nombre de colonnes occupé par le contenu associé.
Si l’avis concerne toute la page
Il doit être placé en haut de page. Il peut même être positionné immédiatement au-dessus ou en dessous du titre principal (niveau hiérarchique H1), si la nature et le contexte du message le justifient. Dans ce cas, l’avis ne doit pas avoir de titre.
Pour les messages de succès et d’erreur, puisqu’ils concernent l’ensemble d’une page Formulaire, ils s’affichent également dans le haut de page, précisément sous le titre du formulaire.
Si l’avis concerne une seule section
Il s’insère à l’intérieur de cette section et vient occuper la même largeur que le contenu textuel associé.
Interactivité
Hyperlien
Afin que l’avis reste bref, un hyperlien peut être intégré dans le message pour rediriger vers une page qui communique plus de détails sur la situation.
Afficher et masquer les détails
- Pour un avis dont le contenu est un peu plus long, une partie du message peut être masquée pour réduire l’espace qu’il occupe dans la page.
- Le cas échéant, il importe de choisir un titre et une phrase explicative complète qui communiqueront l’essentiel du message et qui resteront visibles.
- Par défaut, les détails sont masqués, mais peuvent être révélés au clic.
- Les libellés standardisés de ces boutons sont Afficher les détails et Masquer les détails.
Fermeture du message
Un bouton permettant de fermer l’avis peut être ajouté aux avis qui, une fois lus, peuvent être supprimés.
Quand envisager autre chose
- Pour une alerte ponctuelle importante qui concerne plus que la page en question, envisager l'avis général.
- Pour mettre en évidence une information importante et pérenne en lien avec un contenu de la page et qui n’a pas d’impact direct sur l’expérience utilisateur, opter pour le complément d’information.
- Pour inviter l’utilisateur ou l’utilisatrice à valider l’action en cours et l’aviser des conséquences possibles avant de passer à la prochaine étape (exemple : perte des données saisies), choisir la modale.
Rédaction UX
L’avis explique en quelques mots l’impact de la situation sur l’utilisateur ou l’utilisatrice et, au besoin, l’action requise.
Puisqu’il s’adresse au grand public, il doit être rédigé de façon simple et concise afin d’être compris par tout le monde avec un minimum d’efforts.
Titre (optionnel)
S’il y a un titre, celui-ci est en gras et doit clairement communiquer le sujet de l’avis.
Limite de caractères : 25, espaces incluses.
Message
Si l’avis ne comporte pas de titre, le gras peut être utilisé pour mettre en évidence certains mots ou un segment du message, mais avec modération.
Le recours à une liste à puces n’est pas recommandé, mais peut être utile et justifié dans certains contextes, notamment pour lister plusieurs erreurs détectées dans un formulaire.
Limite de caractères : 200, espaces incluses, pour la portion visible du message.
- Si l’avis comporte un bouton Afficher les détails afin de dévoiler la suite du message, il n’y a pas de limite de caractères, mais il est recommandé de s’en tenir à quelques lignes.
Couleurs et styles
Chaque type d’avis est associé à une combinaison de couleur pour l’arrière-plan, l’icône et le texte.
Personnalisation de l’avis
Des options permettent de personnaliser l’avis afin de répondre à différents besoins.
Afficher et masquer les détails
L’avis a une limite de caractères qui assure la visibilité de l’essentiel du message. Toutefois, il est possible de rédiger un message plus long pour communiquer davantage à même l’avis. Un bouton pour afficher et masquer les détails doit alors être ajouté.
Avis d’erreur
Selon le type d’erreur détectée, l’icône de l’avis doit s’adapter à la nature du message, soit une erreur ou un échec.
Grille
Voici comment se positionne l’avis selon les différentes tailles d’écran.
Grille – Petite (mobile)
Sur mobile, l’icône vient se placer au-dessus du contenu et s’aligne avec celui-ci.
Grilles – Moyenne (tablette), large et x-large (ordinateur)
Sur tablette et sur ordinateur, l’icône est positionnée à gauche du contenu.
Spécifications
Voici les spécifications en pixels des espacements qui délimitent les différents éléments de l’avis.
Grilles – Moyenne (tablette), large et x-large (ordinateur)
La largeur maximale occupée par le texte est de 600 pixels.
États interactifs
Si l’avis contient un hyperlien, les états interactifs de ce composant s’appliquent au niveau du lien seulement. Consulter les états interactifs de l’hyperlien.
Lorsque l’avis intègre les boutons Afficher les détails et Masquer les détails, ceux-ci adoptent les mêmes états interactifs que le bouton texte. Voir les états interactifs du bouton texte.
Principes d'accessibilité
L’avis est associé à une section particulière du site ou d’une page. Le niveau hiérarchique de son titre est établi selon la structure de la page dans laquelle il s’affiche. Il peut varier d’un niveau H2 à H5.
Ce composant peut également inclure les éléments interactifs suivants : un bouton pour afficher ou masquer les détails du message, un hyperlien et un bouton Fermer, qui prend la forme d’un X.
L’avis est toujours accompagné d’une icône ayant un texte de remplacement pour annoncer la nature du message. La combinaison de couleurs utilisée pour l’icône et l’arrière-plan offre également une indication visuelle supplémentaire sur la nature du message.
Textes de remplacement
Icône de l’avis
Un texte de remplacement annonçant la nature du message accompagne toujours l’icône d’un avis. Toutefois, si le titre ou le message de l’avis inclut le texte de remplacement, ce dernier n’est pas requis.
Les textes de remplacement sont prédéfinis.
(en français et en anglais).
(warning, en anglais).
(critical alert, en anglais).
Bouton Fermer
Représenté par un X, le bouton Fermer a aussi un texte de remplacement annonçant le résultat de l’action si un clic est effectué dessus.
Ce texte est prédéfini.
(close notice, en anglais).
Interactions au clavier
- Touche Tab. : pour déplacer le repère visuel sur les éléments interactifs présents dans l’avis, selon leur ordre séquentiel d’apparition : hyperlien, boutons Afficher les détails et Masquer les détails et bouton Fermer (X).
- La combinaison des touches Majuscule et Tab. permet de faire le chemin inverse.
- Chaque élément atteint par le focus du clavier doit avoir un état interactif prévu pour afficher un repère visuel du focus.
- Touche Entrée ou barre d’espacement, correspondant à un clic de souris : pour activer un élément.
Interactions au lecteur d'écran
- Si l’avis s’affiche en cours de navigation, soit après le chargement initial de la page, son contenu est lu automatiquement par le lecteur d’écran
- Si l’avis contient des boutons Afficher les détails et Masquer les détails, ils sont annoncés par le lecteur d’écran.
- Lorsque le contenu est masqué, il ne doit pas être détecté par le lecteur d’écran.
- C’est seulement une fois affiché que le lecteur d’écran en lit automatiquement le contenu. Le repère visuel du focus va alors se positionner sur le bouton Masquer les détails.
- Si l’avis contient un hyperlien, ce dernier doit être annoncé comme un lien par le lecteur d’écran.