Felmeddelande HTML-mallar

Rena HTML-mallar för felmeddelanden

HTML-mallar för felmeddelanden ger dig färdig markup när något går fel. Varje mall kombinerar en rubrik som anger problemet, en kort förklaring samt en länk eller knapp för att gå vidare. Många layouter här är 404-skärmar och kompakta felblock. Samma delar beter sig annorlunda så snart ett fel uppstår inuti ett formulär eller följer på en misslyckad begäran.

Koden bakom en fristående 404-sida

När felet fyller hela sidan brukar markupen följa denna ordning:

1. En huvudrubrik som beskriver problemet i klartext, eftersom en gigantisk 404-siffra säger väldigt lite för någon som hoppar mellan rubriker med en skärmläsare.
2. Ett kort stycke därunder som föreslår en trolig orsak, som en felstavad adress eller flyttat innehåll.
3. En primär länk tillbaka till startsidan eller till den sektion besökaren troligen letade efter.
4. Valfri sekundär navigering eller ett sökfält för användare som kommer via ett gammalt bokmärke.

En server levererar vanligtvis en anpassad 404-sida för den felaktiga adress som efterfrågades, vilket gör att relativa länkar och bildsökvägar kan sluta fungera när adressen ligger flera mappnivåer ner. Rotrelativa sökvägar (root-relative) förhindrar en halvt trasig felsida, vilket vore en märklig upplevelse för någon som redan gått vilse.

Inline-feedback vid fält och misslyckade inskick

Inuti ett formulär krymper felet från ett helt dokument till en eller två meningar intill det element som felade. Koden beror då på vilket problem besökaren stötte på:

1. Ett valideringsfel hör hemma direkt efter sitt fält i källkodsordningen, och en "aria-describedby"-referens gör att hjälpmedel kan läsa upp etiketten och åtgärdsförslaget tillsammans.
2. En misslyckad begäran behöver ett meddelande nära reglaget som utlöste den, inuti en live-region som annonserar felet utan sidomladdning. En riktig knapp lämpar sig bäst för att försöka igen, eftersom en länk bör leda någon annanstans.
3. Ett långt formulär kan inledas med en kort sammanfattning där varje problem är en intern länk som hoppar direkt till inmatningsfältet som kräver åtgärd.

Återanvändbara block som förblir tillgängliga

Ett felblock är enklast att återanvända när dess delar delar en och samma behållare, så att enheten kan flyttas från en 404-sida till en instrumentpanel som en sammanhängande del. Nicepages fördesignade Elements och Blocks gör det snabbt att arrangera en sådan enhet på arbetsytan. Rubriknivån och valet mellan en länk och en knapp bör ändå kontrolleras snabbt i den exporterade HTML-koden, eftersom båda avgör hur blocket läses upp.

De starkaste HTML-mallarna för felmeddelanden har markup som skalar från en hel sida ner till ett enskilt fält samtidigt som läsordningen och kopplingarna till skärmläsare förblir intakta.