Alerte générale

L'alerte générale sert aux avertissements et messages de haute importance qui touchent l'ensemble de la population ou la grande majorité. Ces avertissements portent sur des délais à respecter ou des mesures à adopter, par exemple lors de situations d’urgence. Elle apparaît par défaut dans toutes les pages, directement sous le PIV et la navigation principale, et occupe la largeur de l’écran pour être très visible.

Exemple

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.

Il existe deux types d’alertes :

L’alerte jaune, accompagnée d’une icône ⚠️, est utilisée pour les messages hautement prioritaires, comme une inondation. Sur Québec.ca, ce type d’alerte est utilisé lorsque le message touche plusieurs thématiques. Elle apparaît sur toutes les pages du site, sauf celle qui contient ledit message.

L’alerte bleue, accompagnée d’une icône ⓘ, est utilisée pour les messages moins prioritaires, comme la mise à jour des règlements sur la pêche. Sur Québec.ca, ce type d’alerte est utilisé lorsque le message est relatif à une thématique restreinte, donc à un public plus ciblé. Elle apparaît sur les pages de la thématique choisie.

Exemple

Comment l'utiliser

L’alerte jaune et l’alerte bleue peuvent contenir :

• du texte courant (aucune autre mise en forme que le gras n'est possible);
• des mots en gras et/ou en italique;
• un lien textuel souligné.

Elles peuvent être permanentes ou masquables. Si la deuxième option est choisie, un petit X au coin supérieur droit permettra à l’utilisateur de faire disparaître l’alerte pour une durée déterminée.

À faire

À ne pas faire

Afin que l’alerte n’occupe pas un trop grand espace dans l’écran (dans le format mobile surtout), le texte devrait comprendre entre 72 et 105 caractères pour les alertes masquables et entre 80 et 120 caractères pour les alertes persistantes.

Exemple

Informations techniques

Dimensions

L’alerte occupe toute la largeur de l’écran. Sa hauteur varie selon la quantité de contenu.

Espacements

Les éléments qui composent l’alerte (icônes et texte) doivent s'aligner sur les marges de la page. Il faut prévoir un dégagement vertical d’un minimum de 16 px lorsque la largeur de la fenêtre de navigation est réduite.

Pour l'alerte en format bureau, tous les éléments s’alignent verticalement avec le milieu de la boîte. Le dégagement horizontal est de 24 px. 

En format mobile, tous les éléments s’alignent verticalement avec le haut de la zone de texte. Le dégagement est de 16 px entre le contenu et les bords de l'alerte.