Alertes contextuelles: Système de conception de Canada.ca

  • Dernière modification : 2020-12-18

Les alertes sont des avis présentant de nouveaux renseignements importants qui doivent apparaître dans la page.

En-tête de l'alerte

Description de l'alerte

Sur cette page

Quand l'utiliser

Utilisez les alertes contextuelles pour :

  • attirer l'attention d'une personne sur un changement important au niveau de la page ou de la sous-section, comme une panne de service ou de site, des changements récents dans un processus ou un service
  • fournir le résultat d'une action de l'utilisateur, par exemple, confirmer le succès ou aviser une personne d'une erreur
  • avertir une personne d'une conséquence d'une action ou d'une inaction liée à sa tâche

Pour utiliser des alertes contextuelles en temps de crise, suivez ces lignes directrices :

Quoi éviter

N’utilisez pas les alertes contextuelles :

  • pour fournir des renseignements à propos d’une étape normale d’un processus ou d’une tâche
  • simplement pour insister sur un élément de contenu
  • dans les cas où un avertissement n’est ni à risque élevé ni fréquent
  • pour créer des étiquettes ou des pilules. Utilisez plutôt ces composantes :

Comment mettre en œuvre

Le contenu est rédigé afin d’atteindre un auditoire ayant un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius).

Situer l’alerte dans le contexte approprié :

Vise l'ensemble du site
Placez-la en haut de la page, au-dessus de l’en-tête principal.
Vise la page
Placez-la en dessous de l’en-tête de la page.
Vise une sous-section de la page
Placez-la à l’endroit qui convient le mieux à l’intérieur de cette sous-section, généralement sous l’en-tête de la sous-section ou entre deux paragraphes.

Utiliser le type d'alerte approprié :

  1. Alerte de danger
  2. Alerte d'avertissement
  3. Alerte d’information
  4. Alerte de succès

1. Alerte de danger

Utilisation : Utilisez l’alerte de danger pour attirer l’attention sur une situation qui pourrait mettre une personne en danger, comme un avertissement de ne pas voyager. Vous pouvez aussi l'utiliser pour aviser une personne d’un problème technique qui pourrait l’empêcher d’accomplir sa tâche, comme une soumission de données invalide dans un formulaire.

Si vous êtes enceinte ou envisagez de concevoir un enfant – Avis concernant les deux partenaires

Évitez de voyager au Costa Rica si vous êtes enceinte ou prévoyez concevoir un enfant au cours des trois prochains mois.

Code
<section class="alert alert-danger">
  <h3>Si vous êtes enceinte ou envisagez de concevoir un enfant – Avis concernant les deux partenaires</h3>
  <p>Évitez de voyager au Costa Rica si vous êtes enceinte ou prévoyez concevoir un enfant au cours des trois prochains mois.</p>
</section>

2. Alerte d’avertissement

Utilisation : Utilisez l’alerte d’avertissement pour attirer l’attention sur une conséquence possible d’une action ou d’une inaction, comme une sanction légale qui pourrait s’appliquer.

Modifications aux lois sur la conduite avec facultés affaiblies et la criminalité liée au cannabis

Les nouvelles peines pour conduite avec facultés affaiblies et infractions liées au cannabis pourraient avoir une incidence sur votre statut d’immigrant au Canada. Si vous commettez l’un de ces crimes, vous ne pourrez peut-être pas venir au Canada ou y rester.

Nouvelles peines et comment vous pourriez être affectés

Code
<section class="alert alert-warning">
 <h3>Modifications aux lois sur la conduite avec facultés affaiblies et la criminalité liée au cannabis</h3>
 <p>Les nouvelles peines pour conduite avec facultés affaiblies et infractions liées au cannabis pourraient avoir une incidence sur votre statut d’immigrant au Canada. Si vous commettez l’un de ces crimes, vous ne pourrez peut-être pas venir au Canada ou y rester.</p>
 <p><a href="https://www.canada.ca/fr/immigration-refugies-citoyennete/nouvelles/avis/peines-conduite-affaiblies-cannabis-incidence-statut-immigrant.html">Nouvelles peines et comment vous pourriez être affectés </a></p>
</section>

3. Alerte d’information

Utilisation : Utilisez l’alerte d’information pour attirer l’attention sur une précision concernant le contenu environnant, comme le nombre de semaines pour recevoir un remboursement quand une demande est effectuée par courrier ou par téléphone.

État actuel de l’appel de candidatures : Fermé

Nous vous remercions de votre intérêt à l’égard du programme Emplois d’été Canada. L’appel de candidatures est maintenant fermé.

Code
<section class="alert alert-info">
  <h3>État actuel de l’appel de candidatures : Fermé</h3>
  <p>Nous vous remercions de votre intérêt à l’égard du programme Emplois d’été Canada. L’appel de candidatures est maintenant fermé.</p>
</section>

4. Alerte de succès

Utilisation : Utilisez l’alerte de succès pour attirer l’attention sur une action fructueuse, comme la validation du formulaire ou l'accomplissement d'une tâche.

Votre demande de données accessibles au public à partir de la liste des organismes de bienfaisance a été acceptée.

Le délai de traitement de votre demande peut prendre jusqu’à quatre (4) semaines. Nous communiquerons avec vous si nous avons besoin de plus amples renseignements.

Code
<section class="alert alert-success">
  <h3>Votre demande de données accessibles au public à partir de la liste des organismes de bienfaisance a été acceptée.</h3>
	<p>Le délai de traitement de votre demande peut prendre jusqu’à quatre (4) semaines. Nous communiquerons avec vous si nous avons besoin de plus amples renseignements.</p>
</section>

Recherche et blogue

Ce style d'alerte a été utilisé avec succès dans le cadre d'un projet visant à améliorer le contenu des conseils aux voyageurs :

Derniers changements

Promotion du modèle d'alerte bêta au modèle d'alerte stable.

Discussion

Discuter de la composante sur la page des problèmes techniques de Github

Avez-vous trouvé ce que vous cherchiez?

Qu’est-ce qui n’allait pas?

Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses électroniques seront supprimés.
Maximum de 300 caractères

Merci de vos commentaires

Date de modification :