Felsummering
Du använder felsummering när användaren har valt att fortsätta till nästa steg i ett flöde och det finns valideringsfel som användaren ska justera.
Design och språk
Felsummeringen ska
- ha full bredd men texten ska ha samma bredd som innehållet på sidan
- placeras under sidhuvudet
- trycka ner övrig information, det vill säga inte täcka någon annan information.
Varje fel som visas i summeringen ska om möjligt länka till det fält där felet uppstod.
Texten i felsummeringen
Felsummeringen ska vara korta instruktioner som hjälper användaren att fylla i rätt information i rätt fält. Var också tydlig med att det inte är användaren som har orsakat felet.
Den text som visas i summeringen ska vara samma text som visas som felmeddelande vid fältet. Tänk på att när texten visas i felsummeringen så står den inte i sitt sammanhang och det kan även förekomma flera felmeddelanden med samma text. Du kan därför behöva lägga till mellanrubriker i felsummeringen om det är svårt för användaren att förstå till vilket fält felmeddelandet hör.
Princip | Skriv | Skriv inte |
|---|---|---|
Var specifik | Kon är registrerad på en annan ägare. | Identitet ogiltig |
Skriv kort genom att använda imperativ | Fyll i gatuadressen. | Du ska fylla i gatuadressen |
Aktivt språk, visa vem som ska göra något | Fyll i gatuadressen. | Gatuadress måste anges |
Använd bestämd form | Fyll i gatuadressen. | Fyll i gatuadress |
När du ska använda felsummering
Du använder felsummering när validering av en hel sida sker efter att användaren har valt att gå vidare i ett flöde.
När du inte ska använda felsummering
Du ska inte använda felsummeringen när en validering sker direkt i ett fält. Då ska felmeddelandet istället visas i direkt anslutning till fältet.
Komponent och kod
Komponenten driftsattes första gången i version 4.0.4.
<div class="c-error-summary">
<div class="c-error-summary__content" role="alert">
<div class="c-error-summary__title">
<span class="sjv-i-fel"></span>Något har gått fel
</div>
<ol class="c-error-summary__list">
<li><a href="#"> Fyll i personnumret. </a></li>
<li><a href="#"> Fyll i postnumret. </a></li>
<li><a href="#"> Du är inte registrerad som ägare till hunden. </a></li>
</ol>
</div>
</div>Exempel
Senast publicerad
Sidansvarig för sidan är Styleguide