Alertes - Alerts

Les alertes permettent d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche en cours.

 

L’alerte est disponible en deux tailles : taille médium (MD, par défaut) et petite taille ‘SM’.

Structure

L’alerte est composée des éléments suivants :

  • un titre - obligatoire sur la version MD, optionnel sur la version SM.

  • un pictogramme et une couleur - obligatoires.

  • un texte de description - optionnel sur la version MD, obligatoire sur la version SM.

  • une croix de fermeture - optionnelle.

Les alertes s’affichent de manière contextuelle dans une page/un formulaire, lors d’interactions utilisateurs avec les messages de validation (exemple : succès ou erreur suite à soumission d’un formulaire) ou lors d’événements côté application/système (exemple : messages d'information, d’alerte, de mise à jour…).

Pour les développeurs
Nous avons retiré l’attribut role="alert" des exemples de code pour les alertes présentes au chargement de la page.
En effet, les éléments avec un role="alert" sont les premières choses lues par les technologies d'assistance.
De ce fait, le role="alert" doit être réservé aux alertes ajoutées (/injectées) dynamiquement au cours de la navigation.
Ex: alertes de notification suite à une action utilisateur ou mise à jour d’une status.

Types d’alerte

Il y a 4 types d'alerte permettant de donner des informations de différentes natures :

  • Erreur : à utiliser quand il y a plusieurs erreurs dans un formulaire, ou des erreurs bloquantes à remonter pour l’utilisateur.

 

1 2 3 4 <div class="fr-alert fr-alert--error"> <p class="fr-alert__title">Erreur : titre du message</p> <p>Description</p> </div>

 

  • Succès : sert à indiquer à l’utilisateur qu’une action ou une tâche a été terminée avec succès.

 

1 2 3 4 <div class="fr-alert fr-alert--success"> <p class="fr-alert__title">Succès de l&#39;envoi</p> <p>Description</p> </div>

 

  • Information : à utiliser pour mettre en exergue des informations importantes

 

1 2 3 4 <div class="fr-alert fr-alert--info"> <p class="fr-alert__title">Information : titre du message</p> <p>Description détaillée du message</p> </div>

 

  • Attention : à utiliser pour mettre en exergue des risques ou points d’attention importants.

 

1 2 3 4 <div class="fr-alert fr-alert--warning"> <p class="fr-alert__title">Attention : titre du message</p> <p>Description détaillée du message</p> </div>

 

Le composant doit être placé en première place du contenu auquel il est associé (en haut d’une page, d’un formulaire, d’un container…).

Pour les développeurs
Le titre, matérialisé par la classe rf-alert__title peut être une balise <p> (<p class="fr-alert__title"> ) ou une balise de titre - <h2 class="alert__title"> à <h6> - vous permettant de vous adapter à structure et l’architecture de votre contenu.

Tailles disponibles

L’alerte existe en deux tailles, Small et Medium, à utiliser en fonction de l’espace d’affichage disponible.

Alerte ‘small’ (SM)

L’alerte small est à utiliser lorsque l’espace d’affichage est réduit.

 

1 2 3 4 5 6 7 8 9 10 11 <div class="fr-alert fr-alert--info fr-alert--sm"> <p>Information : titre de l&#39;information</p> </div> <div class="fr-alert fr-alert--success fr-alert--sm"> <p>Information : titre de l&#39;information</p> </div> <div class="fr-alert fr-alert--error fr-alert--sm"> <p>Information : titre de l&#39;information</p> </div>

 

Alertes ‘medium’ (MD)

L’alerte small est à utiliser lorsque l’espace d’affichage est important.

Alerte medium simple

L’alerte medium simple est à utiliser lors qu’un titre seul permet de donner l’information à l’utilisateur.

 

1 2 3 <div class="fr-alert fr-alert--error"> <p class="fr-alert__title">Erreur : description détaillée du message....</p> </div>

 

Alertes medium avec description

L’alerte medium avec description permet de donner des informations complémentaires à l’utilisateur, en plus du titre.

 

1 2 3 4 <div class="fr-alert fr-alert--success"> <p class="fr-alert__title">Erreur : titre du message</p> <p>Description détaillée du message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>

 

Alertes avec bouton de fermeture

Il est possible d’ajouter un bouton de fermeture afin que l’utilisateur puisse masquer l’alerte.
La fermeture peut ou non être gérée par le javascript du DSFR.

Si vous souhaitez gérer vous-même la fermeture du bloc , l’alerte est également disponible avec le bouton “fermer” sans le comportement javascript associé, qui est à implémenter dans votre environnement :

1 2 3 4 5 6 7 8 9 10 <div class="fr-alert fr-alert--success"> <p class="fr-alert__title">Information</p> <p>Description</p> <button class="fr-btn--close fr-btn">Masquer le message</button> </div> <div class="fr-alert fr-alert--success"> <p>Description</p> <button class="fr-btn--close fr-btn">Masquer le message</button> </div>

 

Règles d’utilisation

Usages

  • Le message doit être écrit dans un langage compréhensible facilement. Il faut éviter le jargon.
    Idéalement, il doit contenir la nature du message porté par le composant (succès, erreur, information), l’icône et la couleur ne garantissent pas à elle seule la bonne compréhension du message pour la totalité des utilisateurs.

  • Quand l'utilisateur doit faire une action en lien/suite à l’affichage d'une alerte, il faut rendre cette tâche aussi simple que possible en détaillant ce qui est attendu de la part de l’utilisateur dans la description.

Accessibilité

  • La nature du message (erreur, succès, information) doit être clairement exprimée dans le titre de l’alerte. La couleur ou l’icône n’étant pas accessibles ou compréhensibles par tous les utilisateurs.

  • Dans le cas où un bouton de fermeture est prévu, lorsque l'alerte est fermée, le focus doit être repositionné sur un élément pertinent dans la page.

  • Si l’alerte apparait en cours de navigation et qu’elle dispose d'un bouton fermer, ce dernier devra prendre le focus lors de son affichage.

  • Le titre de l’alerte - .fr-alert__title - est dans un élément <p> afin d’être certain que la hiérarchie des titres est toujours respectée. Vous pouvez remplacer cette balise par un titre <hx class=”fr-alert__title”> adapté à votre hiérarchie de contenu.

  • Le bloc doit avoir l’attribut role=”alert” si il est injecté dynamiquement dans la page.

Contenus

  • Le titre de l'alerte doit être clair et concis.

  • Le texte de description de d'alerte doit détailler clairement l’information/le problème à l’utilisateur.

  • Le ton doit être courtois, il ne faut pas blâmer l’utilisateur, mais l’accompagner.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :