Boîte d'avertissement : Quand et comment l'utiliser
Utilisez les boîtes d'avertissement pour indiquer un risque spécifique, expliquer sa conséquence et donner l'action sécurisée avant un travail irréversible, coûteux, réglementé ou dangereux.
Une boîte d’avertissement arrête le lecteur avant une action qui pourrait causer un préjudice matériel. Ce n’est pas un style d’emphase général. Un avertissement publiable énonce le risque, la conséquence et l’action qui évite ou limite le préjudice.
L’élément en direct fonctionne car il identifie ce qui peut mal tourner, explique ce qui sera perdu et donne une séquence sécurisée avant la commande destructive. « Soyez prudent lors de la suppression » ne serait pas suffisant : cela transfère l’évaluation du risque au lecteur sans lui dire ce que signifie un comportement prudent.
Pourquoi cet élément est important
Les avertissements existent pour changer une décision avant qu’un préjudice ne survienne. Un lecteur qui suit des instructions se concentre généralement sur l’atteinte du résultat promis, il peut donc survoler les qualifications qui ressemblent à un contexte ordinaire. Un avertissement clairement délimité interrompt cette dynamique au point où le lecteur a encore un choix. Il crée une pause délibérée, explique pourquoi cette pause est importante et fournit une action sécurisée à suivre.
Cet élément sert la psychologie du lecteur uniquement lorsque les auteurs l’utilisent de manière sélective. Si des conseils de routine, des inconvénients mineurs et des pertes irréversibles reçoivent tous le même traitement, les lecteurs apprennent que le signal visuel importe rarement. Ils commencent à le sauter. L’exagération crée donc exactement le mode de défaillance qu’un avertissement est censé prévenir : le message important est ignoré lorsque les enjeux sont réels. Le ton doit informer, non effrayer.
L’extractibilité machine signifie que le logiciel peut isoler l’avertissement et préserver son sens en dehors des paragraphes environnants. Un bloc typé avec une étiquette d’avertissement textuelle et un corps autonome est plus facile à identifier qu’une phrase rouge cachée dans une étape. La structure risque–conséquence–action survit également aux changements de présentation. Un système de publication automatisé peut déplacer le contenu entre Markdown, Hugo et WordPress sans avoir à déduire quelle phrase décrit un préjudice ou ce que le lecteur doit faire.
Suivez les règles de rédaction des éléments lors du mappage de l’élément. La couleur, une icône, un texte en gras ou un titre nommé « Important » ne créent pas à eux seuls une sémantique d’avertissement. Les mots doivent rester complets lorsqu’ils sont copiés en texte brut ou lus sans le style visuel de la page.
Quand l’utiliser
Utilisez un avertissement lorsque le lecteur s’apprête à faire un choix ou à effectuer une action ayant une conséquence matérielle prévisible. L’élément est obligatoire lorsque le contenu couvre l’un de ces déclencheurs :
- Action irréversible : suppression, écrasement, publication, soumission, fermeture de compte, ou toute autre action qui ne peut pas être annulée de manière fiable.
- Perte ou exposition de données : des enregistrements peuvent être effacés, corrompus, divulgués, transférés ou rendus inaccessibles.
- Implication financière : une action déclenche un frais, renouvelle un engagement, consomme une allocation payante ou crée un coût qui n’est pas évident au point de décision.
- Risque pour la sécurité ou la santé : suivre, combiner ou sauter une instruction pourrait causer des blessures, une maladie ou des soins retardés.
- Exposition juridique ou réglementaire : une action peut enfreindre une loi, un contrat, une politique, une licence, une règle de conservation, une exigence de consentement ou un processus d’approbation réglementé.
Le déclencheur, et non la préférence de l’auteur ou le nombre de mots disponible, contrôle l’inclusion. Si l’un d’eux s’applique, l’avertissement ne peut pas être raccourci en une étiquette vague, déplacé vers une clause de non-responsabilité générique ou omis pour s’adapter à un modèle. Raccourcissez d’abord les explications environnantes.
N’utilisez pas un avertissement pour un raccourci utile, une bonne pratique, une définition, un inconvénient mineur, un prérequis normal ou une erreur réversible avec une récupération évidente. Ce sont des quasi-échecs car ils peuvent être « importants » dans le langage courant mais ne nécessitent pas une décision d’arrêt. Placez les prérequis obligatoires dans la procédure, les améliorations facultatives dans une boîte d’astuce et la récupération d’erreur ordinaire à côté de l’étape qu’elle répare.
Ne mettez pas en garde simplement parce qu’un résultat est indésirable. « Des titres de faible qualité peuvent réduire les clics » est une explication de performance, pas un avertissement. Cela devient un avertissement uniquement lorsqu’une action voisine crée une conséquence matérielle spécifique : par exemple, modifier la structure d’URL d’un site en direct sans redirections peut briser les liens entrants et supprimer des destinations indexées. Dans ce cas, énoncez l’action préventive avant le changement.
Où le placer
Un avertissement se place immédiatement avant la première action qu’il concerne. « Action » inclut une instruction numérotée, une commande, une soumission de formulaire, une commande d’achat, un téléchargement, une recommandation ou une décision sur laquelle un lecteur pourrait agir. Placez la boîte après suffisamment de contexte pour identifier la situation mais avant la première instruction exécutable. Ne révélez jamais le risque après l’action, dans des notes de fin ou uniquement dans une FAQ de conclusion.
Si un avertissement régit une séquence, placez-le avant la séquence et nommez son périmètre : « Les trois étapes suivantes remplacent la base de données de production. » Ne répétez pas le même avertissement dans chaque étape. Si une étape ultérieure introduit un risque différent, ajoutez un second avertissement immédiatement avant cette étape.
Un avertissement ne peut pas être placé directement à côté d’un autre encart, d’un appel à l’action promotionnel ou d’une bannière décorative. Les boîtes adjacentes se disputent l’attention et peuvent donner l’impression que l’avertissement fait partie d’une pile marketing. Il ne doit pas séparer une instruction de son entrée requise, une affirmation de sa preuve, ou un titre de tableau du tableau. Ajoutez une transition simple ou restructurez la section pour que l’avertissement qualifie clairement une décision.
Placez le texte juridique standard conformément à la politique applicable, mais gardez l’avertissement opérationnel à côté de l’action risquée. Déplacer l’avertissement dans un pied de page parce qu’une clause de non-responsabilité existe déjà va à l’encontre de son objectif.
Anatomie
L’élément rendu comporte six zones sémantiques :
- Étiquette de gravité : texte visible qui indique qu’il s’agit d’un avertissement ; il ne peut pas être véhiculé uniquement par la couleur ou une icône.
- Titre spécifique : nomme la décision ou le danger, par exemple « Avertissement : exportez les enregistrements avant la suppression. »
- Risque : énonce quelle action ou condition peut mal tourner.
- Conséquence : énonce le résultat crédible et qui ou quoi est affecté.
- Action : indique au lecteur comment éviter, réduire, vérifier ou escalader le risque avant de procéder.
- Relation de position : relie l’avertissement à l’action suivante qu’il régit.
La légende reste dans le texte en direct de la page plutôt que d’être intégrée dans l’image. Cela maintient chaque étiquette accessible aux technologies d’assistance et permet à la conception de changer sans rendre la spécification inexacte.
Exemples de conception
La bibliothèque actuelle prend en charge un seul niveau de gravité : Hugo le rend avec type="important". Il n’existe pas de variante distincte pour prudence, avertissement, danger, critique ou urgence. Cette simplicité délibérée rend le choix de l’auteur cohérent et réduit le risque que deux auteurs attribuent des couleurs différentes à la même conséquence. Le compromis est que le composant ne peut pas distinguer visuellement une perte financière récupérable d’un danger physique immédiat. Les auteurs doivent indiquer la gravité dans le titre et la conséquence plutôt que de compter sur une couleur plus forte.
La galerie teste donc le seul niveau de gravité sous ses variations de contenu prises en charge : l’étiquette par défaut, un titre personnalisé spécifique, un maximum de deux paragraphes et une fenêtre étroite. Ce sont des cas de rendu, non des niveaux de gravité différents.
N’inventez pas de gravité en ajoutant des emojis, des majuscules, des points d’exclamation répétés, des classes personnalisées ou des valeurs de type non prises en charge. Si la bibliothèque acquiert plus tard plusieurs niveaux, leurs limites doivent être basées sur la conséquence et la réponse requise, non sur l’intensité du sentiment de l’auteur à propos du passage.
Paramètres
Le moteur de rendu n’a que les entrées type, title et body. Le risque, la conséquence et l’action sont des champs éditoriaux à l’intérieur du body ; les garder explicites dans ce contrat empêche un encart visuellement valide de publier un guide incomplet.
| Nom | Type | Requis | Min/max | Défaut | Source | |
|---|---|---|---|---|---|---|
type | Enum | Oui | Exactement important | Aucun pour cet élément | Attribut du shortcode | |
title | Chaîne simple | Oui | 3–9 mots ; 70 caractères | Le défaut du rendu est Important, mais le contrat d’avertissement exige un titre spécifique | Attribut du shortcode | |
risk | Markdown simple | Oui | 1 phrase ; 8–30 mots | Aucun | Body, première phrase ou proposition | |
consequence | Markdown simple | Oui | 1 phrase ; 8–35 mots | Aucun | Body après le risque | |
action | Markdown simple | Oui | 1–2 phrases ; 8–40 mots | Aucun | Body après la conséquence | |
body | Markdown | Oui | 25–90 mots ; 1–2 paragraphes | Aucun | Body du shortcode | |
inlineLink | URL plus ancre | Non | 0–1 lien | Omis | Body | |
position | Relation documentaire | Oui | Une action ou une séquence nommée | Immédiatement avant l’action régie | Placement de l’élément |
Le titre devrait commencer par « Avertissement : » sauf si un vocabulaire réglementé exige un autre mot de gravité explicite. Le body peut combiner risque et conséquence dans une phrase, mais les trois éléments doivent rester identifiables. Un lien peut pointer vers des instructions détaillées ou des procédures de récupération ; il ne peut pas remplacer l’action sécurisée immédiate.
Syntaxe et exemples de code
Les trois mappings portent le même type, titre et body. La directive portable est la forme canonique rédigée par l’auteur. Hugo utilise le shortcode callout existant. WordPress peut implémenter le même contrat sous forme de bloc enregistré ; une forme de shortcode n’est acceptable que là où cette installation l’a enregistré.
Directive Markdown portable
:::warning{title="Warning: export records before deletion"}
Deleting the workspace permanently removes its stored reports. Export the records you must retain and verify the workspace name before confirming deletion.
:::
Shortcode Hugo
{{< callout type="important" title="Warning: export records before deletion" >}}Deleting the workspace permanently removes its stored reports. Export the records you must retain and verify the workspace name before confirming deletion.{{< /callout >}}
Utilisez les paramètres nommés ensemble. Ne mélangez pas la valeur positionnelle important avec un paramètre nommé title.
Bloc ou shortcode WordPress
<!-- wp:amicited/warning {"title":"Warning: export records before deletion"} -->
<p>Deleting the workspace permanently removes its stored reports. Export the records you must retain and verify the workspace name before confirming deletion.</p>
<!-- /wp:amicited/warning -->
[warning title="Warning: export records before deletion"]Deleting the workspace permanently removes its stored reports. Export the records you must retain and verify the workspace name before confirming deletion.[/warning]
La présentation peut différer selon les systèmes, mais la gravité textuelle, le risque, la conséquence, l’action et la position pré-action doivent survivre à la conversion.
Exemples
Bon : retraitement payant avec risque d’écrasement
Cet exemple nomme deux risques concrets, énonce les deux conséquences et fournit des actions qui les préviennent. Son ton est factuel : il ne prétend pas que le compte sera ruiné ou que les données seront irrécupérables si une exportation conservée offre une voie de récupération.
Mauvais : risque sans guide
Le mauvais exemple n’identifie pas l’opération, ne décrit pas la conséquence crédible et n’indique pas au lecteur comment procéder en toute sécurité. « Sérieux » est une affirmation de gravité non étayée, tandis que « à vos propres risques » transfère la responsabilité au lieu de guider le comportement. Remplacez-le par le changement d’état exact, ce qui peut être perdu ou violé, et la condition de vérification, sauvegarde, approbation, alternative ou arrêt requise avant l’action.
Un autre échec est le catastrophisme : « Ne touchez jamais à ce paramètre ou votre site entier pourrait être détruit ! » Même si le paramètre est important, le libellé n’est pas limité par un résultat probable et n’offre aucune voie sécurisée. Les lecteurs qui découvrent que l’affirmation est exagérée diminueront la valeur des avertissements ultérieurs.
Contenu juridique et réglementé
Une clause de non-responsabilité et un avertissement remplissent des fonctions différentes. Une clause de non-responsabilité définit le champ d’application, les qualifications, l’incertitude, le statut professionnel ou les limites de responsabilité. Un avertissement identifie un danger prévisible à un point de décision et modifie ce que le lecteur doit faire ensuite. L’un ne peut pas se substituer à l’autre.
Pour les documents juridiques, financiers, de santé, de sécurité, de confidentialité ou autres documents réglementés, conservez la clause de non-responsabilité approuvée à l’emplacement requis sur la page et ajoutez un avertissement avant toute action spécifique qui pourrait créer une exposition. Par exemple, une déclaration générale selon laquelle un article est éducatif ne supprime pas la nécessité d’avertir avant d’ordonner à un lecteur d’arrêter un traitement prescrit, de transférer des données réglementées, de publier une affirmation sans approbation ou d’accepter des frais récurrents.
Les auteurs ne doivent pas improviser des conclusions juridiques dans l’avertissement. Utilisez un libellé approuvé par le réviseur responsable (expert matière ou conformité), préservez toute terminologie requise et donnez l’action opérationnelle que le lecteur peut réellement entreprendre : faire une pause, obtenir un consentement, conserver des enregistrements, consulter un professionnel qualifié, utiliser un canal approuvé ou escalader pour révision. Un lien vague « consulter les conditions » est insuffisant lorsque la page peut énoncer la condition d’arrêt immédiate.
Balises Schema et accessibilité
Une boîte d’avertissement n’a pas de propriété Balises Schema
dédiée et ne doit pas créer d’objet JSON-LD
autonome. Elle reste un contenu visible dans l’article qui la contient. Lorsqu’elle qualifie une procédure structurée, son texte intégral peut être inclus dans l’instruction visible de l’étape concernée et dans le HowToStep.text correspondant ; elle ne doit pas devenir une fausse étape ni exister uniquement dans les données structurées.
Les rôles Accessible Rich Internet Applications (ARIA) communiquent le comportement de l’interface aux technologies d’assistance lorsque le HTML natif ne le fournit pas. Les avertissements statiques présents lors du chargement de la page doivent rester dans l’ordre normal du document et n’ont pas besoin de role="alert". Un rôle alert provoque une annonce immédiate et n’est approprié que lorsqu’un avertissement urgent apparaît dynamiquement après une interaction. L’appliquer à chaque encart statique peut interrompre les utilisateurs de lecteurs d’écran et rendre l’entrée de page de routine bruyante. Le moteur de rendu Hugo actuel produit un <div> étiqueté sans rôle ARIA, ce qui est acceptable pour un bloc statique lorsque son texte et son emplacement portent le sens.
L’indépendance des couleurs signifie que l’avertissement reste reconnaissable en monochrome, en mode contraste élevé, dans une exportation texte uniquement et dans la sortie du lecteur d’écran. Utilisez un titre explicite « Avertissement : » et décrivez la gravité avec des mots : « supprime définitivement », « déclenche des frais récurrents », « peut exposer des données personnelles » ou « nécessite une attention médicale ». N’écrivez pas « évitez l’option rouge » et ne comptez pas sur le texte alternatif d’une icône pour indiquer le danger.
Gardez le titre et le body dans l’ordre de lecture avant l’action régie. Les liens nécessitent un texte d’ancrage descriptif, l’accès clavier ne doit pas dépendre de l’encart, et les instructions essentielles ne peuvent pas apparaître uniquement dans une capture d’écran. Si un futur composant interactif permet la fermeture, la fermeture ne doit pas masquer un avertissement obligatoire tant que l’action reste disponible.
Règles de rédaction
Rédigez un avertissement spécifique en 25–90 mots et pas plus de deux courts paragraphes. Utilisez un titre de 3 à 9 mots, commençant normalement par « Avertissement : ». Nommez l’action ou la condition déclencheuse, la conséquence crédible et la réponse sécurisée. Mettez la raison avant la règle : les lecteurs se conforment plus facilement lorsqu’ils comprennent ce que la règle empêche.
Utilisez des verbes proportionnés. « Supprime définitivement », « écrase », « facture », « expose », « invalide » et « peut causer » décrivent des mécanismes ou des résultats. « Dévastateur », « désastreux », « terrifiant » et « catastrophique » dramatisent généralement au lieu de préciser. Énoncez honnêtement l’incertitude lorsque le résultat dépend du contexte, et ne garantissez jamais la sécurité simplement parce qu’un lecteur suit une précaution.
Gardez un point de décision par boîte. Une courte liste n’est acceptable que lorsque plusieurs vérifications doivent toutes avoir lieu avant cette seule action ; sinon, utilisez de la prose. Ne mettez pas de texte promotionnel, d’avantages, de témoignages, de blagues, d’emojis décoratifs, d’astuces non liées, de procédure complète, de tableau comparatif, de plusieurs titres ou d’appel à l’action dans l’avertissement. Ne cachez pas les instructions requises derrière un lien.
N’utilisez jamais la boîte pour protéger une affirmation non étayée, intimider un lecteur pour l’inciter à acheter ou créer une urgence artificielle. Si l’action est requise, conservez l’action dans la procédure principale en plus d’indiquer l’étape préventive dans l’avertissement. La boîte modifie l’attention ; elle ne remplace pas la structure opérationnelle du document.
Types de publications qui l’utilisent
Le frontmatter postTypes enregistre les formats dans lesquels les déclencheurs d’avertissement sont prévisibles. Dans chaque ligne, « obligatoire » signifie que l’auteur n’a aucune discrétion dès que le déclencheur indiqué apparaît ; l’élément ne peut pas être supprimé ou compressé en dessous du risque, de la conséquence et de l’action pour atteindre un objectif de longueur.
| Type de publication | Déclencheur obligatoire | Position requise |
|---|---|---|
| guide ultime | Le guide inclut des instructions de sécurité, santé, juridiques, de conformité, payantes, destructrices ou de traitement des données. | Avant la première instruction risquée dans chaque section indépendamment actionnable. |
| guide pratique | Une étape est irréversible, peut perdre ou exposer des données, déclenche un coût, crée une exposition réglementée ou comporte un risque pour la sécurité ou la santé. | Après les prérequis pertinents et immédiatement avant l’étape ou la séquence concernée. |
| page qu’est-ce-que | L’explication inclut des conseils sur lesquels un lecteur pourrait agir dans un contexte réglementé, médical, sensible à la sécurité ou juridiquement conséquent. | Avant la première recommandation actionnable, pas à l’intérieur de la définition. |
| page produit | Une commande, un achat, une annulation, une migration, une suppression, une intégration ou une utilisation de données a un coût matériel ou une conséquence irréversible non évidente dans son libellé. | À côté et avant l’action ou la décision concernée ; jamais uniquement dans les conditions du pied de page. |
| page catégorie | Un conseil de sélection pourrait créer une conséquence de compatibilité, de coût total, de sécurité, de santé, juridique ou de conformité. | Avant la recommandation ou le choix de filtre qui expose le lecteur au risque. |
| page cas d’usage | Le flux de travail promu traite des données réglementées, automatise une décision conséquente, engendre des coûts ou peut produire des résultats irréversibles ou dangereux. | Avant l’étape du flux de travail ou l’action produit qui introduit l’exposition. |
D’autres types de publications peuvent utiliser un avertissement lorsque les mêmes déclencheurs apparaissent. Le tableau définit les cas récurrents et non facultatifs ; il n’accorde pas d’exemption aux formats omis de postTypes.
Liste de contrôle QA
Avant la publication, vérifiez tous les points suivants :
- La boîte nomme une action, condition ou décision spécifique qui crée le risque.
- La conséquence énonce ce qui peut arriver et qui ou quoi est affecté, sans exagération.
- L’action indique au lecteur comment éviter, réduire, vérifier, arrêter ou escalader le risque.
- L’avertissement apparaît avant la première action régie et nomme clairement son périmètre.
- Aucune astuce, promotion, bannière ou second avertissement n’entre en concurrence directe avec lui.
- Un déclencheur obligatoire n’a pas été omis ou raccourci pour des raisons de mise en page ou de nombre de mots.
- Le type
importantet le titre d’avertissement textuel spécifique sont présents. - La gravité reste claire sans couleur, icônes, images ou contexte environnant.
- Un avertissement statique n’utilise pas de rôle alert inutile ; un avertissement urgent dynamique est annoncé de manière appropriée.
- Toute clause de non-responsabilité reste séparée et ne remplace pas les conseils au point d’action.
- Le libellé réglementé et la terminologie requise ont obtenu l’approbation du sujet compétent.
- Les mappings Markdown, Hugo et WordPress préservent le même titre, body et position.
- Le body reste entre 25 et 90 mots, ne contient aucun langage marketing et n’utilise pas plus d’un lien nécessaire.
- Les commentaires de captures d’écran ne nomment que les futures captures requises ; aucun chemin d’image inexistant n’est rendu.
FAQ
Que doit contenir toute boîte d’avertissement ? Le risque spécifique, sa conséquence crédible et l’action sécurisée doivent tous être présents. L’élément est incomplet sans l’un d’eux.
Une boîte d’avertissement peut-elle apparaître après l’action risquée ? Non. Elle doit apparaître avant que le lecteur puisse agir, même si cela nécessite de restructurer les étapes environnantes.
Une clause de non-responsabilité remplace-t-elle une boîte d’avertissement ? Non. La clause de non-responsabilité définit le champ d’application ou les limites ; l’avertissement change le comportement à un point de décision spécifique. Les pages réglementées peuvent nécessiter les deux.
Une boîte d’avertissement doit-elle utiliser un rôle alert ? Pas lorsqu’elle est déjà présente au chargement de la page. Réservez le rôle alert aux informations urgentes introduites dynamiquement après une interaction.
Combien de boîtes d’avertissement une page peut-elle contenir ? Utilisez-en une par point de décision distinct et regroupez les avertissements ayant la même cible. Si les avertissements dominent la page, restructurez la procédure ou reconsidérez si l’action devrait être proposée du tout.
Une boîte d’avertissement mérite sa proéminence visuelle uniquement lorsqu’elle prévient un préjudice concret. Énoncez le risque, la conséquence et l’action calmement, placez-les avant la décision et préservez ce sens dans chaque sortie.
Plus de tutoriels dans cette section
Prêt à le mettre en pratique ?
Vérification gratuite · Essai de 7 jours · sans carte de crédit