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.
<aside class="c-error-summary">
<span class="sjv-i-fel" tabindex="-1" aria-hidden="true"></span><div class="c-error-summary__content" role="alert">
<div class="c-error-summary__title">Något har gått fel </div>
<ol class="c-error-summary__list">
<li><a class="c-link" href="javascript:window.location.href=window.location.href" class="c-link"><span>Felmeddelande från fråga ett.</span></a></li>
<li><a class="c-link" href="javascript:window.location.href=window.location.href" class="c-link"><span>Felmeddelande från fråga två.</span></a></li>
<li><a class="c-link" href="javascript:window.location.href=window.location.href" class="c-link"><span>Felmeddelande från fråga tre.</span></a></li>
<li><a class="c-link" href="javascript:window.location.href=window.location.href" class="c-link"><span>Felmeddelande från fråga fyra.</span></a></li>
<li><a class="c-link" href="javascript:window.location.href=window.location.href" class="c-link"><span>Felmeddelande från fråga fem.</span></a></li>
</ol>
</div>
</aside><jv-error-summary role-attr=alert>
<div class="c-error-summary__title">Något har gått fel </div>
<ol class="c-error-summary__list">
<li><jv-link><a href="javascript:window.location.href=window.location.href"><span>Felmeddelande från fråga ett.</span></a></jv-link></li>
<li><jv-link><a href="javascript:window.location.href=window.location.href"><span>Felmeddelande från fråga två.</span></a></jv-link></li>
<li><jv-link><a href="javascript:window.location.href=window.location.href"><span>Felmeddelande från fråga tre.</span></a></jv-link></li>
<li><jv-link><a href="javascript:window.location.href=window.location.href"><span>Felmeddelande från fråga fyra.</span></a></jv-link></li>
<li><jv-link><a href="javascript:window.location.href=window.location.href"><span>Felmeddelande från fråga fem.</span></a></jv-link></li>
</ol>
</jv-error-summary>Exempel
Senast publicerad
Sidansvarig för sidan är Styleguide