🆕 Alertes - Alerts

Ce composant est disponible depuis la version 1.0.0.
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quand à son utilisation en production !


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…).

Types d’alerte

Il y a 3 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 role="alert" 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 role="alert" 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 role="alert" 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>

 

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 role="alert" class="fr-alert fr-alert--info fr-alert--sm"> <p>Information : titre de l&#39;information</p> </div> <div role="alert" class="fr-alert fr-alert--success fr-alert--sm"> <p>Information : titre de l&#39;information</p> </div> <div role="alert" 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 role="alert" 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 role="alert" 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.

Pour que la fermeture soit gérée ‘automatiquement’, il suffit d’ajouter un élément collapse autours du bloc alerte, et de le lier au bouton de fermeture via les attributs dédiés.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="fr-collapse" id="fr-alert-to-close"> <div role="alert" class="fr-alert fr-alert--info"> <p class="fr-alert__title">Information</p> <p>Cliquer sur la croix pour fermer l&#39;alerte</p> <button class="fr-link--close fr-link" aria-expanded="true" aria-controls="fr-alert-to-close">Masquer le message</button> </div> </div> <div class="fr-collapse" id="fr-alert-to-close-sm"> <div role="alert" class="fr-alert fr-alert--info fr-alert--sm"> <p>Information : cliquer sur la croix pour fermer l&#39;alerte</p> <button class="fr-link--close fr-link" aria-expanded="true" aria-controls="fr-alert-to-close-sm">Masquer le message</button> </div> </div>

 

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 (disclosure / collapse) associé:

1 2 3 4 5 6 7 8 9 10 <div role="alert" class="fr-alert fr-alert--success"> <p class="fr-alert__title">Information</p> <p>Description</p> <button class="fr-link--close fr-link">Masquer le message</button> </div> <div role="alert" class="fr-alert fr-alert--success"> <p>Description</p> <button class="fr-link--close fr-link">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é

  • Le bloc doit avoir l’attribut role=”alert”.

  • 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, replacer le focus sur l'élément précédant ou suivant l’alerte après la fermeture de celle-ci.

  • 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.

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 :