Alerte générale
L’alerte générale signale une information importante destinée à l’ensemble des usagers. Elle est conçue pour attirer rapidement l’attention.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation et de l’anatomie. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
L’alerte générale est offerte en deux variantes selon l’importance du message :
- Alerte d’importance élevée : de couleur jaune
- Alerte d’importance modérée : de couleur bleue
Elle peut aussi être déclinée selon le comportement :
- Alerte masquable : peut être fermée en cliquant sur le bouton de fermeture
- Alerte persistante : reste affichée, ne peut être fermée et n’a pas de bouton de fermeture
Quand l’utiliser
Une alerte générale est utilisée pour les messages non contextuels qui communiquent une information essentielle. Par non contextuel, on entend une information que l’utilisateur ne cherche pas nécessairement, mais qui doit lui être communiquée maintenant.
Le choix entre une alerte d’importance élevée ou modérée dépend de la portée et de l’urgence du message.
Alerte d’importance élevée
À utiliser lorsque l’information est urgente, critique et d’intérêt public général. Elle vise à informer rapidement un large public de la situation. Elle nécessite souvent une réaction immédiate.
Alerte d’importance modérée
À utiliser lorsque l’information est importante mais non critique, ou qu’elle s’adresse à un public plus ciblé. Elle ne requiert pas une action immédiate, mais doit tout de même être vue rapidement.
Quand ne pas l’utiliser
Pour des contenus promotionnels.
Pour des contenus non urgents.
Pour des informations qui concernent uniquement une page ou un contenu précis (préférer un encadré ou une alerte locale).
Anatomie
- Icône d’alerte
- Texte du message
- Lien contextuel
Optionnel - Icône de fermeture
Optionnel
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Texte du message
Le texte de l’alerte doit être court, clair et immédiatement compréhensible. Il doit transmettre l’information essentielle sans détour ni surcharge.
La longueur idéale varie selon le type d’alerte : entre 72 et 105 caractères pour les alertes masquables, et entre 80 et 120 caractères pour les alertes persistantes. Ces balises assurent une bonne lisibilité, notamment sur les écrans mobiles.
Aucune hiérarchie visuelle ne doit être utilisée à l’intérieur du message. Évitez les titres, les sous-titres ou les mises en forme complexes. Seules les mises en évidence en gras ou italique sont permises pour appuyer un mot ou une expression importante.
Le message ne doit pas contenir de liste, d’image ou d’élément graphique. Il doit rester en format paragraphe simple afin de préserver la lisibilité et la cohérence visuelle du composant.
À faire
À ne pas faire
Lien contextuel (facultatif)
Un seul lien est permis par alerte.
Le lien doit mener à une page qui fournit plus de détails sur le sujet de l’alerte.
Il doit être clairement formulé, concis et explicite pour permettre à l’utilisateur de comprendre immédiatement vers quoi il sera dirigé. Évitez les formulations vagues comme « En savoir plus ».
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Alerte générale
Positionnement et alignement : Sous le menu de navigation principale ou sous le bandeau d’en-tête du PIV s’il n’y a pas de menu de navigation principale. L’alerte est centrée horizontalement.
Dimensions : Sa largeur correspond à la largeur maximale du contenu principal du site. Hauteur variable selon le contenu. En format mobile, la taille du texte et les dégagements intérieurs se condensent pour limiter l’espace occupé dans l’écran de petite taille.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Alerte masquable
L’alerte masquable se ferme avec le bouton de fermeture (icône « X »).
L’alerte masquable est conçue pour ne pas gêner la navigation une fois que l’utilisateur a pris connaissance du message. Lorsqu’un utilisateur la ferme, le système doit enregistrer cet état pour une durée minimale recommandée (ex. : 24 heures), afin d’éviter qu’elle ne réapparaisse inutilement.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le lien pour accéder à plus d’informations.
- Cliquer sur l’icône « X » pour fermer l’alerte (si masquable).
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Touche Tab pour naviguer jusqu’au lien et au bouton de fermeture.
- Touche Entrée ou Espace pour activer le bouton de fermeture.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026