Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Fejlmeddelelser
Fejlmeddelelser hjælper brugeren til at udfylde enkelte formularelementer korrekt.
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
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
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
Datofelter
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">Dropdown (select)</label>
<span class="form-error-message" id="options-error-error">
<span class="sr-only">Fejl: </span>Vælg en mulighed
</span>
<select class="form-select" name="options-error" id="options-error" aria-invalid="true"
aria-describedby="options-error-error" required>
<option value="option1">Ingen mulighed valgt</option>
<option value="option2">Mulighed 1</option>
<option value="option3">Mulighed 2</option>
<option value="option4">Mulighed 3</option>
</select>
</div>Inputfelt
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>Radioknapper
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:
foridnamearia-describedby