Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Fejlopsummering
Fejlopsummeringer bruges til at give overblik over fejl eller mangler, der skal rettes på en side eller et trin, før brugeren kan komme videre.
Sådan bruges komponenten
Anvendes til
Vis en fejlopsummering når der er fejl i noget af det brugeren har indtastet, også hvis der kun er én fejl på siden.
Vejledning
Opsummeringen vises øverst på siden/trinnet under headeren, men over sidens/trinnets øverste overskrift. Fejlopsummeringen indeholder alle de fejlmeddelelser, der måtte være på siden/trinnet, således at brugeren kan navigere direkte til de fejl og mangler, der skal rettes.
Der skal være links i fejlopsummeringen til de steder på siden, hvor fejlene er. Når der trykkes på et link i opsummeringen, skal fokus flyttes til det felt fejlmeddelelsen knytter sig til.
Sørg for at linkene i fejlopsummeringen er identiske med fejlmeddelelsen de linker til.
For fejl i et enkeltstående felt, skal du linke direkte til feltet.
Når en bruger skal indtaste svar i flere felter, fx dag-, måned- og årsfelterne i datofelter, skal du linke til det første felt, der indeholder en fejl.
Hvis du ikke ved, hvilket felt der indeholder en fejl, skal du linke til det første felt i gruppen af felter.
For fejl, der kræver, at en bruger skal vælge en eller flere ting på en liste ved hjælp af en radioknap eller en tjekboks, skal du linke til den første radioknap eller tjekboks på listen.
Placering
Sæt fejlopsummeringen øverst på siden. Hvis din side indeholder en brødkrumme eller et tilbage-link, skal du placere den under disse, men over titlen (den øverste overskrift) på siden.
Se komponenten i eksempelløsninger
Referencer
- Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
- Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)
Installation
HTML Struktur
<nav aria-labelledby="error-summary-example">
<div class="alert alert-error mt-0 mb-8" role="alert" data-module="error-summary">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg>
<div class="alert-body">
<h2 class="alert-heading" id="error-summary-example">Der er problemer</h2>
<ul class="alert-text nobullet-list">
<li><a class="function-link" href="#date-field-year">Datoen for udløbsdato på
dit pas bør inkludere årstal</a></li>
<li><a class="function-link" href="#zipcode-field">Indtast postnummer - fx
4000</a></li>
</ul>
</div>
</div>
</nav>
Indsættes over formularen, men under h1
overskriften.
Hver fejl tilføjes til <ul>
listen med et anchor link til feltet der er omtalt således at fokus flyttes til pågældende felt.
Placering
<nav aria-labelledby="error-form-example">
<div class="alert alert-error mt-0 mb-8" role="alert" data-module="error-summary">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg>
<div class="alert-body">
<h2 class="alert-heading" id="error-form-example">Der er problemer</h2>
<ul class="alert-text nobullet-list">
<li><a class="function-link" href="#example-name-error">Skriv dit fulde navn,
og adskil for- og efternavne med mellemrum, fx Anders Andersen</a>
</li>
<li><a class="function-link" href="#checkboxes-error-option1">Angiv om du er
dansk, svensk eller anden nationalitet</a></li>
<li><a class="function-link" href="#date-input-error-day">Datoen kan ikke være
i fremtiden</a></li>
</ul>
</div>
</div>
</nav>
<h1 id="oplysninger-om-dig">Oplysninger om dig</h1>
<form novalidate>
<div class="form-group form-error">
<label class="form-label" for="example-name-error">Hvad er dit fulde navn?</label>
<span class="form-error-message" id="example-name-error-error">
<span class="sr-only">Fejl: </span>Skriv dit fulde navn, og adskil for- og
efternavne med mellemrum, fx Anders Andersen
</span>
<input type="text" id="example-name-error" name="example-name-error"
class="form-input" aria-invalid="true"
aria-describedby="example-name-error-error " required autocomplete="name">
</div>
<div class="form-group form-error">
<fieldset aria-describedby="checkboxes-error-error">
<legend class="form-label">
Hvad er din nationalitet?
</legend>
<span class="form-error-message" id="checkboxes-error-error">
<span class="sr-only">Fejl: </span>Angiv om du er dansk, svensk eller anden
nationalitet
</span>
<div class="form-group-checkbox">
<input type="checkbox" id="checkboxes-error-option1" name="nationalitet[]"
class="form-checkbox" value="dansk">
<label class="form-label" for="checkboxes-error-option1">Dansk</label>
</div>
<div class="form-group-checkbox">
<input type="checkbox" id="checkboxes-error-option2" name="nationalitet[]"
class="form-checkbox" value="svensk">
<label class="form-label" for="checkboxes-error-option2">Svensk</label>
</div>
<div class="form-group-checkbox">
<input type="checkbox" id="checkboxes-error-option3" name="nationalitet[]"
class="form-checkbox" value="anden">
<label class="form-label" for="checkboxes-error-option3">Anden
nationalitet</label>
</div>
</fieldset>
</div>
<div class="form-group form-error">
<fieldset aria-describedby="date-input-error-hint date-input-error-error ">
<legend class="form-label">
Hvornår blev dit pas udstedt?
</legend>
<span class="form-hint" id="date-input-error-hint">For eksempel: 05 12 2018</span>
<span class="form-error-message" id="date-input-error-error">
<span class="sr-only">Fejl: </span>Datoen kan ikke være i fremtiden
</span>
<div class="date-group mt-3">
<div class="form-group form-group-day">
<label class="form-label" for="date-input-error-day">Dag</label>
<input type="number" id="date-input-error-day" name="date-day"
class="form-input" value="01" required>
</div>
<div class="form-group form-group-month">
<label class="form-label" for="date-input-error-month">Måned</label>
<input type="number" id="date-input-error-month" name="date-month"
class="form-input" value="12" required>
</div>
<div class="form-group form-group-year">
<label class="form-label" for="date-input-error-year">År</label>
<input type="number" id="date-input-error-year" name="date-year"
class="form-input" value="2076" required>
</div>
</div>
</fieldset>
</div>
</form>
Javascript
Fejlopsummering kræver JavaScript samt attributten data-module="error-summary"
for at fungere korrekt. Dermed vil et klik på et link i opsummeringen betyde, at brugeren scroller ned til feltet med fejl uden at scrolle forbi feltets label. Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med nedenstående:
new DKFDS.ErrorSummary(document.getElementById('ALERT-ID')).init();