Komponenter

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.

Åbn dette eksempel i et nyt vindue

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.

Åbn dette eksempel i et nyt vindue

Gå til eksemplets kode

Sådan (do)

Eksempel på, hvordan en fejlmeddelelse kan se ud

Sådan: Indsæt fejlmeddelelser over det felt, hvor fejlen skal rettes, samt øverst på siden. Brug farven rød til både fejlmeddelelser og til at markere, hvor fejlen er (Wroblewski, 2008, s. 119-132). Farven rød signalerer i computersystemer "alarm", "fare", "problem", "fejl" osv. (Johnson, 2010, s. 72) og er den farve, det menneskelige øje ser bedst (Johnson, 2010, s. 54).

Ikke sådan (don't)

Eksempel på, hvordan en fejlmeddelelse ikke bør se ud

Ikke sådan: Undgå, at fejlmeddelelsen kun optræder ét sted på siden. Nogle brugere vil ikke få øje på den. Undgå også, at fejlen kun vises på én måde – fx med farve (Wroblewski, 2008, s. 119-133). Undgå så vidt muligt at bruge den røde farve til andet end fejlmeddelelser (Johnson, 2010, s. 57).

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 href="#error"></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

Vis dette eksempel i et nyt vindue

<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 href="#error"></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>

Gå til eksemplets retningslinjer

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();

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

Åbn eksempel i nyt vindue

Region

Vælg region

Sagen handler om

Ulykkesforsikring

Erstatningsansvar

Forsikringsselskab

Vælg hvad sagen handler om

Frugter

Æble

Pære

Banan

Mango

Appelsin

Vandmelon

Blåbær

Jordbær

Kirsebær

Vælg mindst én frugt

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-error-summary>
    <div>
        <svg aria-label="Fejl" focusable="false">
            <use href="#error"></use>
        </svg>
        <h2>Der er problemer</h2>
        <ul>
            <li><a href="#sel7fb9c025">Vælg region</a></li>
            <li><a href="#radio-button-fejl1">Vælg hvad sagen handler om</a></li>
            <li><a href="#multiselect-fejl">Vælg mindst én frugt</a></li>
        </ul>
    </div>
</fds-error-summary>

<fds-select>
    <label>Region</label>
    <select name="select2" id="sel7fb9c025">
        <option value="">Vælg region</option>
        <option value="option1">Hovedstaden</option>
        <option value="option2">Midtjylland</option>
        <option value="option3">Nordjylland</option>
        <option value="option4">Sjælland</option>
        <option value="option5">Syddanmark</option>
    </select>
    <fds-error-message id="error13365e97">Vælg region</fds-error-message>
</fds-select>

<fds-radio-button-group>
    <fieldset>
        <legend>Sagen handler om</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v1" id="radio-button-fejl1">
            <label>Ulykkesforsikring</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v2" id="radio-button-fejl2">
            <label>Erstatningsansvar</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v3" id="radio-button-fejl3">
            <label>Forsikringsselskab</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">Vælg hvad sagen handler om</fds-error-message>
    </fieldset>
</fds-radio-button-group>

<fds-multiselect>
    <span slot="label">Frugter</span>
    <fds-multiselect-opener id="multiselect-fejl"></fds-multiselect-opener>

    <fds-multiselect-dialog>
        <fds-multiselect-options>
            <fds-multiselect-option>Æble</fds-multiselect-option>
            <fds-multiselect-option>Pære</fds-multiselect-option>
            <fds-multiselect-option>Banan</fds-multiselect-option>
            <fds-multiselect-option>Mango</fds-multiselect-option>
            <fds-multiselect-option>Appelsin</fds-multiselect-option>
            <fds-multiselect-option>Vandmelon</fds-multiselect-option>
            <fds-multiselect-option>Blåbær</fds-multiselect-option>
            <fds-multiselect-option>Jordbær</fds-multiselect-option>
            <fds-multiselect-option>Kirsebær</fds-multiselect-option>
        </fds-multiselect-options>
    </fds-multiselect-dialog>

    <fds-error-message id="error4b0a4ff3">Vælg mindst én frugt</fds-error-message>
</fds-multiselect>
                        
                    
                    
                        
                            <fds-error-summary role="alert">
    <div>
        <svg aria-label="Fejl" focusable="false">
            <use href="#error"></use>
        </svg>
        <h2>Der er problemer</h2>
        <ul>
            <li>
                <a href="#sel7fb9c025">Vælg region</a>
            </li>
            <li>
                <a href="#radio-button-fejl1">Vælg hvad sagen handler om</a>
            </li>
            <li>
                <a href="#multiselect-fejl">Vælg mindst én frugt</a>
            </li>
        </ul>
    </div>
</fds-error-summary>
<fds-select>
    <label for="sel7fb9c025">Region</label>
    <select name="select2" id="sel7fb9c025" aria-describedby="error13365e97" aria-invalid="true">
        <option value="">Vælg region</option>
        <option value="option1">Hovedstaden</option>
        <option value="option2">Midtjylland</option>
        <option value="option3">Nordjylland</option>
        <option value="option4">Sjælland</option>
        <option value="option5">Syddanmark</option>
    </select>
    <fds-error-message id="error13365e97">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Vælg region</span>
    </fds-error-message>
</fds-select>
<fds-radio-button-group>
    <fieldset aria-describedby="errora9bcb9f4">
        <legend>Sagen handler om</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v1" id="radio-button-fejl1" class="form-radio">
            <label class="form-label" for="radio-button-fejl1">Ulykkesforsikring</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v2" id="radio-button-fejl2" class="form-radio">
            <label class="form-label" for="radio-button-fejl2">Erstatningsansvar</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v3" id="radio-button-fejl3" class="form-radio">
            <label class="form-label" for="radio-button-fejl3">Forsikringsselskab</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">
            <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
            <span class="visible-message">Vælg hvad sagen handler om</span>
        </fds-error-message>
    </fieldset>
</fds-radio-button-group>
<fds-multiselect>
    <span slot="label">Frugter</span>
    <fds-multiselect-opener id="multiselect-fejl"></fds-multiselect-opener>
    <fds-multiselect-dialog>
        <fds-multiselect-options>
            <fds-multiselect-option>Æble</fds-multiselect-option>
            <fds-multiselect-option>Pære</fds-multiselect-option>
            <fds-multiselect-option>Banan</fds-multiselect-option>
            <fds-multiselect-option>Mango</fds-multiselect-option>
            <fds-multiselect-option>Appelsin</fds-multiselect-option>
            <fds-multiselect-option>Vandmelon</fds-multiselect-option>
            <fds-multiselect-option>Blåbær</fds-multiselect-option>
            <fds-multiselect-option>Jordbær</fds-multiselect-option>
            <fds-multiselect-option>Kirsebær</fds-multiselect-option>
        </fds-multiselect-options>
    </fds-multiselect-dialog>
    <fds-error-message id="error4b0a4ff3">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Vælg mindst én frugt</span>
    </fds-error-message>
</fds-multiselect>
                        
                    
                
                    
                

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

Konfiguration

fds-error-summary

Man er som udvikler selv ansvarlig for at give komponenten en liste med links til de elementer, der er fejlet. Komponentens JavaScript sørger for, at det fejlede elements label kan ses, efter en bruger har trykket på et link.

Attributten role="alert" sættes altid på komponenten, hvis denne er udeladt. Det er muligt at overskrive attributten, hvis der i HTML’en sættes en anden værdi end alert, men vær varsom med dette, da det skal være muligt for skærmlæserbrugere at opdage fejlopsummeringen samt eventuelle ændringer.

Attributter

Attribut	Beskrivelse
ready	Sæt til `"false"` for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end `"false"`, for at initialisere komponenten med det samme.