Alertes de page

Utilisez une alerte de page pour informer les utilisateurs de toute information ou modification importante sur une page.

  • Contenu:
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    
    .ontario-alert {
    	border-width: 0 0 0 4px;
    	border-style: solid;
    	padding: spacing.$spacing-5;
    	margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;
    }
    
    .ontario-alert__header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .ontario-alert__header-icon {
    	display: inline-block;
    	vertical-align: top;
    	margin-right: 0.95rem;
    
    	svg {
    		width: 36px;
    		height: 36px;
    
    		@media screen and (max-width: breakpoints.$small-breakpoint) {
    			width: 32px;
    			height: 32px;
    		}
    	}
    }
    
    .ontario-alert__header-title {
    	margin-bottom: spacing.$spacing-3;
    	padding-top: 2px;
    }
    
    .ontario-alert__body {
    	margin-left: 3.25rem;
    	max-width: globalVariables.$standard-width;
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		margin-left: 0;
    	}
    }
    
    .ontario-alert__body p {
    	margin-top: spacing.$spacing-0;
    
    	&:last-of-type {
    		margin-bottom: spacing.$spacing-2;
    	}
    }
    
    .ontario-alert__body p:last-of-type + ul {
    	margin-top: spacing.$spacing-4;
    }
    
    .ontario-alert__body ul:last-of-type {
    	margin-bottom: spacing.$spacing-2;
    }
    
    .ontario-alert--error ul {
    	margin-left: 1.25rem;
    }
    
    .ontario-alert--error ul:last-of-type {
    	margin-bottom: spacing.$spacing-2;
    }
    
    // ---------------------
    //    Alert variations
    // ---------------------
    // informational alert
    .ontario-alert--informational {
    	border-color: colours.$ontario-colour-information;
    	background-color: colours.$ontario-colour-information-light;
    }
    
    .ontario-alert--informational svg {
    	fill: colours.$ontario-colour-information;
    }
    
    // warning alert
    .ontario-alert--warning {
    	border-color: colours.$ontario-colour-warning;
    	background-color: colours.$ontario-colour-warning-light;
    }
    
    .ontario-alert--warning svg {
    	fill: colours.$ontario-colour-warning;
    }
    
    // success alert
    .ontario-alert--success {
    	border-color: colours.$ontario-colour-success;
    	background-color: colours.$ontario-colour-success-light;
    }
    
    .ontario-alert--success svg {
    	fill: colours.$ontario-colour-success;
    }
    
    // error alert
    .ontario-alert--error {
    	border-color: colours.$ontario-colour-alert;
    	background-color: colours.$ontario-colour-alert-light;
    }
    
    .ontario-alert--error svg {
    	fill: colours.$ontario-colour-alert;
    }
    
    .ontario-alert--error a {
    	color: colours.$ontario-colour-alert;
    
    	&:hover,
    	&:focus {
    		color: #6b0000;
    	}
    
    	&:active {
    		color: #280000;
    	}
    }
    
  • URL: /components/raw/page-alerts/page-alerts.scss
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/page-alerts/page-alerts.scss
  • Taille: 2.9 KB
  • Contenu:
    .ontario-alert{border-width:0 0 0 4px;border-style:solid;padding:1.5rem;margin:2rem 0 2.5rem 0}.ontario-alert__header{display:flex}.ontario-alert__header-icon{display:inline-block;vertical-align:top;margin-right:.95rem}.ontario-alert__header-icon svg{width:36px;height:36px}@media screen and (max-width: 40em){.ontario-alert__header-icon svg{width:32px;height:32px}}.ontario-alert__header-title{margin-bottom:.75rem;padding-top:2px}.ontario-alert__body{margin-left:3.25rem;max-width:48rem}@media screen and (max-width: 40em){.ontario-alert__body{margin-left:0}}.ontario-alert__body p{margin-top:0}.ontario-alert__body p:last-of-type{margin-bottom:.5rem}.ontario-alert__body p:last-of-type+ul{margin-top:1rem}.ontario-alert__body ul:last-of-type{margin-bottom:.5rem}.ontario-alert--error ul{margin-left:1.25rem}.ontario-alert--error ul:last-of-type{margin-bottom:.5rem}.ontario-alert--informational{border-color:#1080a6;background-color:#e2f0f4}.ontario-alert--informational svg{fill:#1080a6}.ontario-alert--warning{border-color:#ffd440;background-color:#fef6dc}.ontario-alert--warning svg{fill:#ffd440}.ontario-alert--success{border-color:#118847;background-color:#e5f0e9}.ontario-alert--success svg{fill:#118847}.ontario-alert--error{border-color:#cd0000;background-color:#fceff0}.ontario-alert--error svg{fill:#cd0000}.ontario-alert--error a{color:#cd0000}.ontario-alert--error a:hover,.ontario-alert--error a:focus{color:#6b0000}.ontario-alert--error a:active{color:#280000}
  • URL: /components/raw/page-alerts/page-alerts.css
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/page-alerts/page-alerts.css
  • Taille: 1.5 KB

Quand utiliser cette composante

Les alertes de page contiennent des renseignements pouvant nécessiter une attention rapide et apparaissent généralement en haut d’une page pour attirer l’attention de l’utilisateur.

Utilisez des alertes de page pour :

  • attirer l’attention de l’utilisateur sur les renseignements importants d’une page ou sur l’état du système
  • communiquer le résultat d’une action de l’utilisateur (par exemple, une erreur ou une confirmation)

N’utilisez pas les alertes de page pour simplement insister sur le contenu ou le mettre en évidence; utilisez plutôt des encadrés et des apartés.


Comment fonctionnent les alertes de page

Les alertes de page apparaissent après un changement de contexte. Par exemple, lorsqu’un utilisateur clique sur un lien ou soumet un formulaire, lançant une nouvelle page ou un affichage mis à jour.

Les alertes de résumé de confirmation et d’erreur sont émises à la suite de la soumission d’un formulaire. Lorsque la nouvelle page ou le nouvel affichage apparaît pour la première fois, assurez-vous que la focalisation est déplacée vers l’alerte de résumé de confirmation ou d’erreur. Les lecteurs d’écran annoncent alors l’alerte, indiquant à l’utilisateur l’état de soumission de son formulaire et la marche à suivre.

L’élément de titre HTML doit également commencer par un contenu qui indique l’état (par exemple, « Success: » ou « Error: » ou « There is a problem: ») afin de s’assurer que le retour d’information est fourni dans le nom de la page.


Types d’alertes de page

Il existe quatre principaux types d’alertes de page :

Information

Utilisez les alertes d’information pour les renseignements importants et pouvant nécessiter une attention rapide. Par exemple, les dates importantes, les mises à jour récentes du contenu, les nouvelles politiques ou la confirmation par courriel.

Avertissement

Les alertes d’avertissement informent l’utilisateur d’un élément urgent ou l’aident à éviter un problème. Par exemple, les renseignements sur les voyages, les mises en garde concernant le contenu ou les fermetures de sites.

Confirmation

Les alertes de confirmation doivent être utilisées pour indiquer à l’utilisateur que l’action est réussie. Utilisez-les pour envoyer des messages de confirmation lorsqu’un utilisateur remplit un formulaire web. Par exemple, lorsqu’un paiement a été effectué avec succès lors d’une transaction.

Erreur

Les alertes d’erreur indiquent aux utilisateurs que l’action n’a pas été réussie ou qu’il y a eu une erreur de validation lors de la soumission d’un formulaire. Par exemple, lorsqu’un utilisateur remplit incorrectement un champ et le système ne lui permet pas de terminer la tâche au moment de la soumission, à moins que les erreurs ne soient corrigées.


Pratiques exemplaires

Les alertes de page se trouvent généralement en haut de la page et au-dessus du contenu corps de message principal. Dans certains cas, une alerte peut être nécessaire pour une section particulière d’une page : dans ce cas, placez l’alerte à côté des points de service ou d’information visés.

Si un utilisateur doit effectuer une action à la suite d’une alerte, faites-lui savoir ce qu’il doit faire et rendez cette tâche aussi facile que possible, par exemple en lui fournissant un lien

À faire :

  • essayer de se limiter à une alerte par page
  • rédiger des titres concis et des contenus totalisant un maximum de 280 caractères
  • inclure des titres qui indiquent clairement l’objet de l’alerte (par exemple, « Avertissement »)

À ne pas faire :

  • utiliser les alertes de page uniquement pour la mise en forme du contenu régulier (pour souligner ou mettre en évidence)
  • inclure des alertes qui ne sont pas liées à l’objectif actuel de l’utilisateur

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.