Varningsruta: När och hur du använder den
Använd varningsrutor för att ange en specifik risk, förklara dess konsekvens och ge den säkra åtgärden före irreversibelt, kostsamt, reglerat eller farligt arbete.
En varningsruta stoppar en läsare före en handling som kan orsaka materiell skada. Det är inte en allmän betoningsstil. En publiceringsbar varning anger risken, konsekvensen och åtgärden som undviker eller begränsar skadan.
Det levande elementet fungerar eftersom det identifierar vad som kan gå fel, förklarar vad som kommer att gå förlorat och ger en säker sekvens före den destruktiva kontrollen. “Var försiktig vid borttagning” skulle inte räcka: det överför riskbedömningen tillbaka till läsaren utan att tala om vad försiktigt beteende innebär.
Varför detta element är viktigt
Varningar finns för att ändra ett beslut innan skada inträffar. En läsare som följer instruktioner koncentrerar sig vanligtvis på att nå det utlovade resultatet, så de kan skumma förbi kvalifikationer som ser ut som vanlig bakgrundsinformation. En tydligt avgränsad varning avbryter denna momentum vid den punkt där läsaren fortfarande har ett val. Den skapar en avsiktlig paus, förklarar varför pausen är viktig och tillhandahåller en säker nästa åtgärd.
Detta element tjänar läsarens psykologi endast så länge författare använder det selektivt. Om rutinråd, mindre olägenheter och irreversibel förlust alla behandlas på samma sätt lär sig läsarna att den visuella signalen sällan är viktig. De börjar hoppa över den. Överdrift skapar därför exakt det feltillstånd en varning är avsedd att förhindra: det viktiga budskapet ignoreras när insatserna är verkliga. Tonen ska informera, inte skrämma.
Maskinell extraherbarhet innebär att programvara kan isolera varningen och bevara dess mening utanför de omgivande styckena. En typad textruta med en textuell varningsetikett och en självständig brödtext är lättare att identifiera än en röd mening gömd i ett steg. Strukturen risk–konsekvens–åtgärd överlever också presentationsförändringar. Ett automatiserat publiceringssystem kan flytta innehållet mellan Markdown, Hugo och WordPress utan att behöva gissa vilken mening som beskriver skada eller vad läsaren ska göra.
Följ skrivreglerna för element när du kartlägger elementet. Färg, en ikon, fetstil eller en rubrik som heter “Viktigt” skapar inte varningssemantik på egen hand. Orden måste förbli fullständiga när de kopieras som vanlig text eller läses utan sidans visuella formatering.
När du ska använda det
Använd en varning när läsaren är på väg att göra ett val eller utföra en handling med en förutsägbar materiell konsekvens. Elementet är obligatoriskt när innehållet täcker någon av dessa utlösare:
- Irreversibel handling: borttagning, överskrivning, publicering, inskickning, kontostängning eller annan handling som inte på ett tillförlitligt sätt kan ångras.
- Dataförlust eller exponering: poster kan raderas, korrumperas, avslöjas, överföras eller göras otillgängliga.
- Kostnadskonsekvens: en handling startar en avgift, förnyar ett åtagande, förbrukar en betald tilldelning eller skapar en kostnad som inte är uppenbar vid beslutstillfället.
- Säkerhets- eller hälsorisk: att följa, kombinera eller hoppa över en instruktion kan orsaka skada, sjukdom eller försenad vård.
- Legal eller regelefterlevnadsexponering: en handling kan bryta mot en lag, ett kontrakt, en policy, en licens, en bevaranderegel, ett samtyckeskrav eller en reglerad godkännandeprocess.
Utlösaren, inte författarens preferens eller tillgängligt ordantal, styr inkludering. Om en sådan finns kan varningen inte förkortas till en vag etikett, flyttas till en generisk ansvarsfriskrivning eller utelämnas för att passa en mall. Korta ner omgivande förklaringar först.
Använd inte en varning för en användbar genväg, en bästa praxis, en definition, en mindre olägenhet, ett normalt förkrav eller ett reversibelt fel med en självklar återställning. Dessa är nära missar eftersom de kan vara “viktiga” i vardagligt språk men kräver inte ett stoppbeslut. Placera nödvändiga förkrav i proceduren, valfria förbättringar i en tipsruta och vanlig feltåterställning bredvid steget det reparerar.
Varna inte enbart för att ett utfall är oönskat. “Titlar av låg kvalitet kan minska klick” är en förklaring av prestanda, inte en varning. Det blir varningsmaterial endast när en närliggande handling skapar en specifik, materiell konsekvens: till exempel att ändra URL-strukturen på en live-sajt utan omdirigeringar kan bryta inkommande länkar och ta bort indexerade destinationer. Ange i så fall den förebyggande åtgärden före ändringen.
Var du ska placera den
En varning hör hemma omedelbart före den tidigaste åtgärd den berör. “Åtgärd” inkluderar en numrerad instruktion, ett kommando, formulärinlämning, köpknapp, nedladdning, rekommendation eller ett beslut som en läsare kan agera på. Placera rutan efter tillräckligt sammanhang för att identifiera situationen men före den första utförbara instruktionen. Avslöja aldrig risken efter handlingen, i slutnoter eller endast i en avslutande FAQ.
Om en varning styr en sekvens, placera den före sekvensen och namnge dess omfattning: “De följande tre stegen ersätter produktionsdatabasen.” Upprepa inte samma varning i varje steg. Om ett senare steg introducerar en annan risk, lägg till en andra varning omedelbart före det steget.
En varning får inte placeras direkt bredvid en annan uppmärksamhetsruta, en marknadsföringsuppmaning eller en dekorativ banner. Intilliggande rutor konkurrerar om uppmärksamheten och kan få varningen att se ut som en del av en marknadsföringsstack. Den får inte dela en instruktion från dess obligatoriska inmatning, ett påstående från dess bevis eller en tabelltitel från tabellen. Lägg till en vanlig övergång eller omstrukturera avsnittet så att varningen tydligt kvalificerar ett beslut.
Placera juridisk standardtext enligt tillämplig policy, men behåll den operativa varningen bredvid den riskfyllda åtgärden. Att flytta varningen till en sidfot för att en ansvarsfriskrivning redan finns motverkar dess syfte.
Anatomi
Det renderade elementet har sex semantiska regioner:
- Allvarlighetsetikett: synlig text som säger att detta är en varning; den kan inte förmedlas enbart av färg eller en ikon.
- Specifik rubrik: namnger beslutet eller faran, till exempel “Varning: exportera poster före borttagning.”
- Risk: anger vilken handling eller vilket tillstånd som kan gå fel.
- Konsekvens: anger det trovärdiga resultatet och vem eller vad som påverkas.
- Åtgärd: talar om för läsaren hur man undviker, minskar, verifierar eller eskalerar risken innan man fortsätter.
- Positionsrelation: kopplar varningen till nästa åtgärd den styr.
Förklaringen förblir som levande sidtext snarare än inbakad i bilden. Det håller varje etikett tillgänglig för hjälpmedelsteknik och låter designen ändras utan att specifikationen blir felaktig.
Designexempel
Det aktuella biblioteket stöder en varningsnivå: Hugo renderar den med type="important". Det finns ingen separat försiktighet, varning, fara, kritisk eller nöd-variant. Denna avsiktliga enkelhet gör författarens val konsekvent och minskar risken att två skribenter tilldelar olika färger till samma konsekvens. Avvägningen är att komponenten inte visuellt kan skilja återvinningsbar ekonomisk förlust från omedelbar fysisk fara. Författare måste ange allvarlighetsgrad i rubriken och konsekvensen istället för att förlita sig på en starkare färg.
Galleriet testar därför den enda allvarlighetsgraden under dess stödda innehållsvariationer: standardetiketten, en specifik anpassad rubrik, maximalt två stycken och en smal visningsport. Dessa är renderingsfall, inte olika allvarlighetsnivåer.
Uppfinn inte allvarlighetsgrad genom att lägga till emoji, versaler, upprepade utropstecken, anpassade CSS-klasser eller ej stödda typvärden. Om biblioteket senare får flera nivåer måste deras gränser baseras på konsekvens och erforderligt svar, inte på hur starkt en författare känner för passagen.
Parametrar
Renderaren har endast type, title och body som indata. Risk, konsekvens och åtgärd är redaktionella fält i brödtexten; att hålla dem explicita i detta kontrakt förhindrar att en visuellt giltig uppmärksamhetsruta publicerar ofullständig vägledning.
| Namn | Typ | Krävs | Min/max | Standard | Källa | |
|---|---|---|---|---|---|---|
type | Enum | Ja | Exakt important | Ingen för detta element | Shortcode-attribut | |
title | Enkel sträng | Ja | 3–9 ord; 70 tecken | Renderarens standard är Important, men varningskontraktet kräver en specifik rubrik | Shortcode-attribut | |
risk | Enkel Markdown | Ja | 1 mening; 8–30 ord | Ingen | Brödtext, första meningen eller satsen | |
consequence | Enkel Markdown | Ja | 1 mening; 8–35 ord | Ingen | Brödtext efter risken | |
action | Enkel Markdown | Ja | 1–2 meningar; 8–40 ord | Ingen | Brödtext efter konsekvensen | |
body | Markdown | Ja | 25–90 ord; 1–2 stycken | Ingen | Shortcode-body | |
inlineLink | URL plus ankare | Nej | 0–1 länk | Utelämnad | Brödtext | |
position | Dokumentrelation | Ja | En åtgärd eller en namngiven sekvens | Omedelbart före den styrda åtgärden | Elementplacering |
Rubriken bör börja med “Varning:” om inte en reglerad vokabulär kräver ett annat explicit allvarlighetsord. Brödtexten kan kombinera risk och konsekvens i en mening, men alla tre uppgifterna måste förbli identifierbara. En länk kan peka på detaljerad policy eller återställningsinstruktioner; den kan inte ersätta den omedelbara säkra åtgärden.
Syntax och kodexempel
Alla tre mappningarna bär samma typ, rubrik och brödtext. Det portabla direktivet är den kanoniska författade formen. Hugo använder den befintliga callout-shortcoden. WordPress kan implementera samma kontrakt som ett registrerat block; en shortcode-form är acceptabel endast där installationen har registrerat den.
Portabelt Markdown-direktiv
:::warning{title="Varning: exportera poster före borttagning"}
Att ta bort arbetsytan tar bort dess lagrade rapporter permanent. Exportera de poster du måste behålla och verifiera arbetsytans namn innan du bekräftar borttagningen.
:::
Hugo-shortcode
{{< callout type="important" title="Varning: exportera poster före borttagning" >}}Att ta bort arbetsytan tar bort dess lagrade rapporter permanent. Exportera de poster du måste behålla och verifiera arbetsytans namn innan du bekräftar borttagningen.{{< /callout >}}
Använd namngivna parametrar tillsammans. Blanda inte det positionella important-värdet med en namngiven title-parameter.
WordPress-block eller shortcode
<!-- wp:amicited/warning {"title":"Varning: exportera poster före borttagning"} -->
<p>Att ta bort arbetsytan tar bort dess lagrade rapporter permanent. Exportera de poster du måste behålla och verifiera arbetsytans namn innan du bekräftar borttagningen.</p>
<!-- /wp:amicited/warning -->
[warning title="Varning: exportera poster före borttagning"]Att ta bort arbetsytan tar bort dess lagrade rapporter permanent. Exportera de poster du måste behålla och verifiera arbetsytans namn innan du bekräftar borttagningen.[/warning]
Presentationen kan skilja sig åt mellan system, men den textuella allvarlighetsgraden, risken, konsekvensen, åtgärden och positionen före åtgärden måste överleva konverteringen.
Exempel
Bra: betald återbearbetning med överskrivningsrisk
Detta exempel namnger två konkreta risker, anger båda konsekvenserna och tillhandahåller åtgärder som förhindrar dem. Tonen är saklig: den påstår inte att kontot kommer att förstöras eller att data kommer att vara oåterkallelig om en sparad export ger en återställningsväg.
Dåligt: risk utan vägledning
Det dåliga exemplet identifierar inte operationen, beskriver inte den trovärdiga konsekvensen eller tala om för läsaren hur man fortsätter säkert. “Allvarliga” är ett ogrundat allvarlighetspåstående, medan “på egen risk” flyttar ansvaret istället för att vägleda beteendet. Ersätt med den exakta tillståndsförändringen, vad som kan förloras eller överträdas, och den kontroll, säkerhetskopia, godkännande, alternativ eller stoppvillkor som krävs före handling.
Ett annat misslyckande är överdriven alarmism: “Rör aldrig denna inställning annars kan hela din webbplats förstöras!” Även om inställningen är viktig är formuleringen inte avgränsad av ett troligt utfall och ger ingen säker väg. Läsare som upptäcker att påståendet är överdrivet kommer att bortse från senare varningar.
Juridiskt och reglerat innehåll
En ansvarsfriskrivning och en varning utför olika uppgifter. En ansvarsfriskrivning definierar omfattning, kvalifikationer, osäkerhet, professionell status eller ansvarsgränser. En varning identifierar en förutsägbar fara vid en beslutspunkt och ändrar vad läsaren bör göra härnäst. Den ena kan inte ersätta den andra.
För juridiskt, finansiellt, hälso-, säkerhets-, integritets- eller annat reglerat material, behåll den godkända ansvarsfriskrivningen på dess obligatoriska sidplacering och lägg till en varning före varje specifik åtgärd som kan skapa exponering. Till exempel tar ett allmänt uttalande om att en artikel är utbildande inte bort behovet att varna innan man instruerar en läsare att avbryta ordinerad behandling, överföra reglerad data, publicera ett påstående utan godkännande eller acceptera en återkommande avgift.
Författare får inte improvisera juridiska slutsatser i varningen. Använd formulering som godkänts av ansvarig sakkunnig eller compliance-granskare, bevara eventuell obligatorisk terminologi och ange den operativa åtgärd läsaren faktiskt kan vidta: pausa, inhämta samtycke, behåll poster, konsultera en kvalificerad professionell, använd en godkänd kanal eller eskalera för granskning. En vag “läs villkoren”-länk är otillräcklig när sidan kan ange det omedelbara stoppvillkoret.
Schema-uppmärkning och tillgänglighet
En varningsruta har ingen dedikerad Schema-uppmärkning
och bör inte skapa ett fristående JSON-LD
-objekt. Den förblir synligt innehåll inom den omslutande artikeln. När den kvalificerar en strukturerad procedur kan dess fulla text inkluderas i det relevanta stegets synliga instruktion och motsvarande HowToStep.text; den får inte bli ett falskt steg eller endast finnas i strukturerad data.
Accessible Rich Internet Applications (ARIA)-roller kommunicerar gränssnittsbeteende till hjälpmedelsteknik när native HTML inte tillhandahåller det. Statiska varningar som finns när sidan laddas bör förbli i normal dokumentordning och behöver inte role="alert". En alert-roll orsakar omedelbar uppläsning och är lämplig endast när en brådskande varning visas dynamiskt efter en interaktion. Att applicera den på varje statisk uppmärksamhetsruta kan avbryta skärmläsaranvändare och göra rutinmässig sidladdning brusig. Den nuvarande Hugo-renderaren matar ut en etiketterad <div> utan en ARIA-roll, vilket är acceptabelt för ett statiskt block när dess text och placering bär innebörden.
Färg oberoende innebär att varningen förblir igenkännbar i monokromt, högt kontrastläge, en text-only-export och skärmläsarutdata. Använd en explicit “Varning:"-rubrik och beskriv allvarlighetsgraden med ord: “tar bort permanent,” “startar en återkommande avgift,” “kan exponera personuppgifter” eller “kräver medicinsk vård.” Skriv inte “undvik det röda alternativet” eller förlita dig på en ikons alternativa text för att förmedla faran.
Håll rubriken och brödtexten i läsordning före den styrda åtgärden. Länkar behöver beskrivande ankartext, tangentbordsåtkomst får inte bero på uppmärksamhetsrutan och viktiga instruktioner kan inte endast finnas i en skärmbild. Om en framtida interaktiv komponent tillåter avfärdande får avfärdandet inte dölja en obligatorisk varning medan åtgärden fortfarande är tillgänglig.
Skrivregler
Skriv en specifik varning på 25–90 ord och högst två korta stycken. Använd en rubrik på 3–9 ord, normalt inledd med “Varning:”. Namnge den utlösande handlingen eller tillståndet, den trovärdiga konsekvensen och det säkra svaret. Placera anledningen före regeln: läsare följer mer tillförlitligt när de förstår vad regeln förhindrar.
Använd proportionella verb. “Tar bort permanent,” “skriver över,” “debiterar,” “exponerar,” “ogiltigförklarar” och “kan orsaka” beskriver mekanismer eller utfall. “Förstör,” “katastrofal,” “skrämmande” och “förödande” dramatiserar vanligtvis istället för att specificera. Angiv osäkerhet ärligt när utfallet beror på sammanhanget och garantera aldrig säkerhet enbart för att läsaren följer en försiktighetsåtgärd.
Håll en beslutspunkt per ruta. En kort lista är acceptabel endast när flera kontroller alla måste ske inför den ena åtgärden; använd annars prosa. Placera inte marknadsföringstext, förmåner, vittnesmål, skämt, dekorativa emojis, orelaterade tips, en fullständig procedur, en jämförelsetabell, flera rubriker eller en uppmaning till handling i varningen. Dölj inte obligatoriska instruktioner bakom en länk.
Använd aldrig rutan för att skydda ett ogrundat påstående, skrämma en läsare till köp eller skapa artificiell brådska. Om åtgärden är obligatorisk, behåll åtgärden i huvudproceduren samtidigt som det förebyggande steget anges i varningen. Rutan ändrar uppmärksamhet; den ersätter inte dokumentets operativa struktur.
Posttyper som använder det
Frontmatter-fältet postTypes registrerar de format där varningsutlösare är förutsägbara. I varje rad betyder “obligatorisk” att författaren inte har något utrymme för egen bedömning när den angivna utlösaren förekommer; elementet kan inte tas bort eller komprimeras under risk, konsekvens och åtgärd för att möta ett längdmål.
| Posttyp | Obligatorisk utlösare | Obligatorisk position |
|---|---|---|
| ultimat guide | Guiden innehåller säkerhets-, hälso-, juridiska, efterlevnads-, betalnings-, destruktiva eller datahanteringsinstruktioner. | Före den första riskfyllda instruktionen i varje självständigt åtgärdbart avsnitt. |
| instruktionsguide | Något steg är irreversibelt, kan förlora eller exponera data, startar en kostnad, skapar reglerad exponering eller medför en säkerhets- eller hälsorisk. | Efter relevanta förkrav och omedelbart före det berörda steget eller sekvensen. |
| vad-är-sida | Förklaringen inkluderar råd som en läsare skulle kunna agera på i ett reglerat, medicinskt, säkerhetskänsligt eller juridiskt betydelsefullt sammanhang. | Före den första åtgärdbara rekommendationen, inte i definitionen. |
| produktsida | En kontroll, ett köp, en avbokning, en migrering, en borttagning, en integration eller en dataanvändning har en materiell kostnad eller irreversibel konsekvens som inte är uppenbar från dess etikett. | Bredvid och före den relevanta åtgärden eller beslutet; aldrig endast i sidfotens villkor. |
| kategorisida | Urvalsråd kan skapa en kompatibilitets-, totalkostnads-, säkerhets-, hälso-, juridisk- eller efterlevnadskonsekvens. | Före rekommendationen eller filtervalet som exponerar läsaren för risken. |
| användningsfallsida | Det marknadsförda arbetsflödet hanterar reglerad data, automatiserar ett konsekvensrikt beslut, medför kostnad eller kan producera irreversibla eller osäkra utfall. | Före arbetsflödessteget eller produktåtgärden som introducerar exponeringen. |
Andra posttyper kan använda en varning närhelst samma utlösare förekommer. Tabellen definierar återkommande, icke-valfria fall; den ger inte undantag för format som utelämnats från postTypes.
QA-checklista
Före publicering, verifiera följande:
- Rutan namnger en specifik handling, ett tillstånd eller ett beslut som skapar risken.
- Konsekvensen anger vad som kan hända och vem eller vad som påverkas utan överdrift.
- Åtgärden talar om för läsaren hur man undviker, minskar, verifierar, stoppar eller eskalerar risken.
- Varningen visas före den första styrda åtgärden och namnger tydligt sin omfattning.
- Ingen tipsruta, kampanj, banner eller andra varning konkurrerar direkt med den.
- En obligatorisk utlösare har inte utelämnats eller förkortats för layout eller ordantal.
- Typen
importantoch specifik textuell varningsrubrik finns på plats. - Allvarlighetsgraden förblir tydlig utan färg, ikoner, bilder eller omgivande sammanhang.
- En statisk varning använder inte en onödig alert-roll; en dynamisk brådskande varning meddelas på lämpligt sätt.
- Eventuell ansvarsfriskrivning förblir separat och ersätter inte vägledning vid handlingstillfället.
- Reglerad formulering och obligatorisk terminologi har lämpligt sakkunnig-godkännande.
- Markdown-, Hugo- och WordPress-mappningar bevarar samma rubrik, brödtext och position.
- Brödtexten håller sig inom 25–90 ord, innehåller inget marknadsföringsspråk och använder högst en nödvändig länk.
- Skärmbildskommentarer namnger endast de nödvändiga framtida infångningarna; ingen obefintlig bildsökväg renderas.
FAQ
Vad måste varje varningsruta innehålla? Den specifika risken, dess trovärdiga konsekvens och den säkra åtgärden måste alla finnas. Elementet är ofullständigt utan någon av dem.
Kan en varningsruta placeras efter den riskfyllda åtgärden? Nej. Den måste visas innan läsaren kan agera, även om det kräver omstrukturering av omgivande steg.
Ersätter en juridisk ansvarsfriskrivning en varningsruta? Nej. Ansvarsfriskrivningen definierar omfattning eller begränsningar; varningen ändrar beteende vid en specifik beslutspunkt. Reglerade sidor kan kräva båda.
Ska en varningsruta använda en alert-roll? Inte när den redan finns vid sidladdning. Reservera alert-rollen för brådskande information som introduceras dynamiskt efter en interaktion.
Hur många varningsrutor kan en sida innehålla? Använd en per distinkt beslutspunkt och slå samman varningar med samma mål. Om varningar dominerar sidan, omstrukturera proceduren eller överväg om åtgärden överhuvudtaget bör erbjudas.
En varningsruta förtjänar sin visuella framträdande plats endast när den förhindrar en konkret skada. Ange risken, konsekvensen och åtgärden lugnt, placera dem före beslutet och bevara innebörden i varje utdata.
Fler tutorials i det här avsnittet
Redo att omsätta det i praktiken?
Gratis kontroll · 7 dagars provperiod · inget kreditkort