Fejlmeddelelser

Sådan bruges komponenten

Anvendes til

Brug fejlmeddelelser til at hjælpe brugeren korrekt igennem selvbetjeningsløsningen. Fortæl brugeren, hvad der skal til for at rette problemet og komme videre i et simpelt og venligt sprog.

Brug også fejlmeddelelser til at vise, hvor fejlen eller manglen er, så brugeren ikke skal lede, ved at sætte fejlmeddelelsen umiddelbart over det, der skal rettes eller mangler.

Anvendes ikke til

Brug ikke fejlmeddelelser til at fortælle brugerne, at de ikke er berettigede eller ikke har tilladelse til at gøre noget. I stedet for vis dem en side, der fortæller dem, at de ikke er berettigede, og giver dem nyttige oplysninger om, hvad de skal gøre som det næste.

Brug ikke fejlmeddelelser til at give brugeren beskeder om fejl, der ikke har med brugerens indtastninger og input at gøre, som fx systemfejl. Brug da en besked.

Vejledning

Fejlmeddelelsen skal også vises som et link til fejlen i fejlopsummeringen. Derfor skal fejlmeddelelsen give mening for brugeren, når den læses for sig selv i fejlopsummeringen.

Vis fejlmeddelelsen i rød umiddelbart over, der hvor fejlen er.

Vis en rød streg i venstre side af området, ud for fejlen for at fremhæve fejlen.

Marker også selve feltet der er fejl i med rødt.

For at hjælpe skærmlæsere tilføjes en skjult tekst med ordet “Fejl:” foran fejlmeddelelsen. Brugere af skærmlæser vil da fx høre “Fejl: Dette er ikke en gyldig mailadresse.”

Skriv klart og præcist

Beskriv for brugeren, hvad der er sket og hvordan det kan rettes.

Meddelelsen skal være skrevet i lægmandssprog, være imødekommende og så kortfattet som muligt.

Kom ikke med et eksempel i fejlmeddelelsen, hvis der allerede er et eksempel som hjælpetekst. Hvis du fx beder om et cpr-nummer og der allerede under labelen står “ddmmåååå-nnnn” eller “22091908-1856” som hjælpetekst, så skal det ikke også stå i fejlmeddelelsen.

Vær konsistent

Brug den samme fejlmeddelelse ved feltet og i fejlopsummeringen så de ser ens ud, lyder ens, og betyder det samme, og så de giver mening ude af kontekst.

Gør det nemt for brugeren at forstå, hvad der er sket og hvad der skal til for at komme videre. Brug således den label (spørgsmålet), der er knyttet til feltet, til at gøre fejlmeddelelsen forståelig. Fx, hvis et felt har en label, hvor der står “Hvor mange timer arbejder du om ugen?”, så kan fejlmeddelelsen være “Indtast hvor mange timer du arbejder om ugen”.

Vær præcis

Generelle fejlmeddelelser er ikke hjælpsomme og de giver ikke mening uden for kontekst. Undgå derfor fejlmeddelelser som:

• “En fejl opstod”
• “Svar på spørgsmålet”
• “Vælg et svar fra listen”
• “Udfyld feltet”
• “Dette felt er påkrævet”

Undgå også fejlmeddelelser, der taler ned til eller skælder brugeren ud som fx:

• “Skriv adressen korrekt”
• “Du har lavet en fejl”
• “Ikke godkendt”

Forskellige fejl har brug for forskellige fejlmeddelelser.

Fx kan der opstå forskellige fejl på inputfelter, felter kan være: tomme, for lange, for korte, indeholde ugyldige tegn, være i et forkert format, m.fl.

En fejlmeddelelse, der forklarer den specifikke situation er mere hjælpsom end den generiske fejlmeddelelse.

Den gode fejlmeddelelse vil fortælle brugeren, hvad der er sket og hvordan det kan løses.

Brug instruktioner og beskrivelser

Visse fejlmeddelelser fungerer bedst som instrukser og andre som beskrivelser. Fx:

• “Indtast dit fornavn” er tydeligere og mere direkte end “Fornavn skal være udfyldt”
• “Indtast et fornavn, der indeholder 35 bogstaver eller færre” bruger flere ord og er mindre direkte og naturligt end “Fornavnet må højst være på 35 bogstaver”.
• “Indtast en dato efter den 31. august 2020, der viser hvornår du startede på det pågældende kursus” bruger flere ord og er mindre direkte og naturligt end “Startdatoen for det valgte kursus skal være efter den 31. august 2020”.

Brug både instrukser og beskrivelser, men brug dem konsekvent. Fx brug en instruktion til tomme felter som “Indtast dit navn” men brug en beskrivelse som “Navnet bør højst være 35 bogstaver” til felter som er for lange.

Sådan (do)

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)

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).

Varianter

Accordions

Datofelter

Datovælger

Dropdown

Inputfelt

Inputfelt med suffix

Inputfelt med karakterbegrænsning

Radioknapper

Tekstområde

Tekstområde med karakterbegrænsning

Tjekboks

Vedhæft fil

Ingen fil er valgt

Skriv “Vælg en [dokumenttype]”.
Fx “Vælg en lægeerklæring”.

Den valgte fil er forkert filtype

Skriv “Den valgte fil skal være af typen [liste af filtyper]”.
Fx “Den valgte fil skal være af typen CSV eller ODS” eller “Den valgte fil skal være af typen JPG, BMP, PNG, TIF eller PDF”.

Filen er for stor

Skriv “Filens størrelse skal være under [største filstørrelse]”.
Fx “Filens størrelse skal være under 2MB”.

Filen er tom

Skriv “Den valgte fil er tom”.

Filen indeholder en virus

Skriv “Den valgte fil indeholder en virus”.

Filen er beskyttet af en adgangskode

Skriv “Den valgte fil er beskyttet af en adgangskode”.

Der var en fejl, og filen ikke kunne uploades

Skriv “Den valgte fil kunne ikke uploades - prøv venligst igen”.

Der er en begrænsning på antal filer brugeren kan vælge

Skriv “Du kan kun vælge op til [højeste antal filer] filer på samme tid”.
Fx “Du kan kun vælge op til 10 filer på samme tid”.

Der ikke er brugt den korrekte skabelon

Skriv “Den valgte fil skal gøre brug af skabelonen”.

Se komponenten i eksempelløsninger

• Fejl i vedhæftede filer
• Formular med fejl

Referencer

• Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
• Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)
• Understanding Success Criterion 3.3.1: Error Identification
• Understanding Success Criterion 3.3.3: Error Suggestion

Installation

HTML Struktur

<div class="form-group form-error">
    <label class="form-label" for="form-error">Hvad hedder dit kursus?</label>

    <span class="form-hint" id="form-error-hint">Fx: Skriv godt</span>
    <span class="form-error-message" id="form-error-error">
        <span class="sr-only">Fejl: </span>Giv dit kursus et navn
    </span>

    <input type="text" id="form-error" name="form-error" class="form-input"
        aria-invalid="true" aria-describedby="form-error-hint form-error-error " required>
</div>

For at hjælpe skærmlæsere tilføjes en skjult tekst “Fejl:” foran fejlmeddelelsen. Brugere af skærmlæser vil da høre “Fejl: Datoen for udløb af dit pas bør være i fortiden.” Teksten er skjult i et <span> element med klassen sr-only. Attributten aria-describedby anvendes i stedet for aria-errormessage grundet bedre support for førstnævnte (se referencer).

Fejlmeddelelsen vises også i fejlopsummeringen øverst på siden.

Accordions

<ul class="accordion">
    <li>
        <h3>
            <button class="accordion-button accordion-error " aria-expanded="true"
                aria-describedby="error-example-accordion1-error"
                aria-controls="error-example-accordion1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#highlight-off"></use></svg>
                </span>
            </button>
        </h3>
        <div id="error-example-accordion1" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert" id='error-example-accordion1-error'>
                <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg>
                <div class="alert-body">
                    <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium.</p>
                </div>
            </div>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Datofelter

<div class="form-group form-error">
    <fieldset
        aria-describedby="date-input-error-example-hint date-input-error-example-error ">
        <legend class="form-label">
            Hvornår blev dit pas udstedt?
        </legend>
        <span class="form-hint" id="date-input-error-example-hint">For eksempel: 05 12
            2018</span>
        <span class="form-error-message" id="date-input-error-example-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-example-day">Dag</label>

                <input type="number" id="date-input-error-example-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-example-month">Måned</label>

                <input type="number" id="date-input-error-example-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-example-year">År</label>

                <input type="number" id="date-input-error-example-year" name="date-year"
                    class="form-input" value="2076" required>
            </div>

        </div>
    </fieldset>
</div>

Datovælger

<div class="form-group form-error">
    <label class="form-label" for="datepicker-example-error1">Dato for aftale</label>

    <span class="form-error-message" id="datepicker-example-error1-error">
        <span class="sr-only">Fejl: </span>Vælg en dato
    </span>
    <div class="date-picker">
        <input type="text" id="datepicker-example-error1" name="datepicker-example-error1"
            class="form-input" aria-invalid="true"
            aria-describedby="datepicker-example-error1-error" required>
    </div>
</div>

Dropdown

<div class="form-group form-error">
    <label class="form-label" for="options-error">Region</label>

    <span class="form-error-message" id="options-error-error">
        <span class="sr-only">Fejl: </span>Vælg region
    </span>
    <select class="form-select" name="options-error" id="options-error" aria-invalid="true"
        aria-describedby="options-error-error" required>
        <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>
</div>

Inputfelt

<div class="form-group form-error">
    <label class="form-label" for="fullname-error-example">Hvad er dit fulde navn?</label>

    <span class="form-error-message" id="fullname-error-example-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="fullname-error-example" name="fullname-error-example"
        class="form-input" aria-invalid="true"
        aria-describedby="fullname-error-example-error " required autocomplete="name">
</div>

Inputfelt med suffix

<div class="form-group form-error">
    <label class="form-label" for="input-pris-error">Pris i 1000 kr.</label>

    <span class="form-error-message" id="input-pris-error-error">
        <span class="sr-only">Fejl: </span>Angiv en pris
    </span>
    <div class="form-input-wrapper form-input-wrapper--suffix">

        <input type="number" id="input-pris-error" name="input-pris-error"
            class="form-input input-char-11" value="123" aria-invalid="true"
            aria-describedby="input-pris-error-error " required>
        <div class="form-input-suffix" aria-hidden="true">000 kr.</div>
    </div>
</div>

Inputfelt med karakterbegrænsning

<div class="form-group form-error form-limit" data-maxlength="20">
    <label class="form-label" for="input-type-limit-error">Inputfelt med
        karakterbegrænsning</label>

    <span class="form-error-message" id="input-type-limit-error-error">
        <span class="sr-only">Fejl: </span>Du kan maks. taste 20 tegn
    </span>

    <input type="text" id="input-type-limit-error" name="input-type-limit-error"
        class="form-input" value="Dette er en sætning med mange tegn" aria-invalid="true"
        aria-describedby="input-type-limit-error-error input-type-limit-error-limit-message"
        required>
    <span id="input-type-limit-error-limit-message" class="sr-only">Du kan indtaste op til 20
        tegn</span>
    <span class="form-hint character-limit" aria-hidden="true">Du har 20 tegn tilbage</span>
    <span class="character-limit-sr-only sr-only" aria-live="polite">Du har 20 tegn
        tilbage</span>
</div>

Radioknapper

<div class="form-group form-error">
    <fieldset aria-labelledby="sagen-omhandler-legend"
        aria-describedby="radiogroup-error-error ">

        <legend class="form-label" id="sagen-omhandler-legend">Sagen handler om</legend>

        <span class="form-error-message" id="radiogroup-error-error">
            <span class="sr-only">Fejl: </span>Vælg hvad sagen handler om
        </span>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option1" name="sagen-omhandler"
                class="form-radio" value="ulykkesforsikring">
            <label class="form-label" for="radiogroup-error-option1">Ulykkesforsikring</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option2" name="sagen-omhandler"
                class="form-radio" value="erstatningsansvar">
            <label class="form-label" for="radiogroup-error-option2">Erstatningsansvar</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option3" name="sagen-omhandler"
                class="form-radio" value="forsikringsselskab">
            <label class="form-label"
                for="radiogroup-error-option3">Forsikringsselskab</label>

        </div>

    </fieldset>
</div>

Tekstområde

<div class="form-group form-error">
    <label class="form-label" for="textarea-error">Tekstområde med fejlmeddelelse</label>

    <span class="form-error-message" id="textarea-error-error">
        <span class="sr-only">Fejl: </span>Hjælpsom fejlmeddelelse
    </span>
    <textarea class="form-input" id="textarea-error" name="textarea-error" rows="5" required aria-describedby="textarea-error-error "></textarea>

</div>

Sørg for at rette værdierne i følgende attributter, så de svarer til din løsning:

• for
• id
• name
• aria-describedby

Tekstområde med karakterbegrænsning

<div class="form-group form-error form-limit" data-maxlength="50">
    <label class="form-label" for="textarea-limit-error">Karakterbegrænsning med
        fejlmeddelelse</label>

    <span class="form-error-message" id="textarea-limit-error-error">
        <span class="sr-only">Fejl: </span>Du kan maks. taste 50 tegn
    </span>
    <textarea class="form-input" id="textarea-limit-error" name="textarea-limit-error" rows="3" required aria-describedby="textarea-limit-error-error textarea-limit-error-limit-message">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
    <span id="textarea-limit-error-limit-message" class="sr-only">Du kan indtaste op til 50
        tegn</span>
    <span class="form-hint character-limit" aria-hidden="true">Du har 50 tegn tilbage</span>
    <span class="character-limit-sr-only sr-only" aria-live="polite">Du har 50 tegn
        tilbage</span>
</div>

Tjekboks

<div class="form-group form-error">
    <fieldset aria-describedby="example-nationalitet-error">
        <legend class="form-label">
            Hvad er din nationalitet?
        </legend>

        <span class="form-error-message" id="example-nationalitet-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="example-nationalitet-option1" name="nationalitet[]"
                class="form-checkbox" value="dansk">
            <label class="form-label" for="example-nationalitet-option1">Dansk</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option2" name="nationalitet[]"
                class="form-checkbox" value="svensk">
            <label class="form-label" for="example-nationalitet-option2">Svensk</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option3" name="nationalitet[]"
                class="form-checkbox" value="anden">
            <label class="form-label" for="example-nationalitet-option3">Anden
                nationalitet</label>

        </div>

    </fieldset>
</div>

Vedhæft fil

<div class="form-group file-input form-error">
    <label class="form-label" for="form-fileinput-error">Vedhæft fil</label>
    <span class="form-error-message mb-3" id="fileinput-error"><span
            class="sr-only">Fejl:</span> Filens størrelse skal være under 2MB</span>
    <input type="file" id="form-fileinput-error" name="file"
        aria-describedby="fileinput-error">
</div>

Referencer

• aria-errormessage attribute (aria) - Accessibility Support
• aria-describedby attribute (aria) - Accessibility Support