Boîtes d’alerte et messages en CSS (info, succès, attention, erreur)
Choisissez les types de message, le style et si la boîte peut être fermée. L’aperçu affiche tous les types ensemble.
Mode d’emploiMettez en avant ce qui ne doit pas passer inaperçu
Disponible en: 
Boîtes d’alerte et messages en CSS (info, succès, attention, erreur): à quoi ça sert
Générez les boîtes qui mettent un message en valeur sur le site ou le blog : avis de maintenance, confirmation de commande, date limite d’une promotion, erreur de formulaire ou astuce au milieu du texte. Choisissez les types, parmi quatre styles (bordure latérale, bordure complète, plein et trait fin), l’arrondi et si la boîte a un bouton de fermeture.
Chaque type a sa propre icône et son titre, pour ne pas dépendre de la seule couleur, et les couleurs de texte offrent un bon contraste avec le fond. La page d’aide explique quand utiliser role=alert et role=status pour les messages qui apparaissent après une action, comme l’envoi d’un formulaire.
Mode d’emploi
- Cochez les types de message.
- Choisissez le style et le bouton de fermeture.
- Copiez le HTML et le CSS.
Quand l’utiliser
- Avis de maintenance ou de promotion.
- Messages de formulaire.
- Astuces et remarques dans les articles.
Questions fréquentes
Quelle est la différence entre role=alert et role=status ?
role=alert fait annoncer le message immédiatement par le lecteur d’écran, en interrompant la lecture en cours ; il convient aux erreurs qui apparaissent après une action, comme un formulaire envoyé avec un problème. role=status annonce sans interrompre et convient aux succès. Les messages déjà présents dans la page à son ouverture n’ont besoin ni de l’un ni de l’autre, et c’est ce que génère l’outil.
Pourquoi la couleur ne suffit-elle pas ?
Les personnes qui ne distinguent pas le rouge du vert, ou qui utilisent le site sur un écran monochrome, ne perçoivent pas la différence par la seule couleur. C’est pourquoi chaque type a sa propre icône et un titre, et les couleurs de texte offrent un contraste suffisant avec le fond.
Comment afficher le message après l’envoi d’un formulaire ?
Laissez la boîte dans le HTML avec l’attribut hidden et role=alert (pour une erreur) ou role=status (pour un succès), puis retirez hidden en JavaScript le moment venu. Le lecteur d’écran annonce le texte à l’instant où il apparaît.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.