Labels eller instruktioner

Hvad kravet indebærer

Når brugeren bliver bedt om at angive input — et tekstfelt, en afkrydsningsboks, en radioknap, en select, en datovælger, en filudvælger — skal der være et label eller en instruktion, der fortæller brugeren, hvad der forventes. Labelet kan være synlig tekst, et <label>-element, en aria-label eller aria-labelledby; instruktioner kan inkludere det påkrævede format, tilladte værdier eller eksempler.

Obligatoriske felter, forventede formater („DD/MM/ÅÅÅÅ“) og særlige begrænsninger („minimum 8 tegn, blanding af store og små bogstaver“) falder alle ind under dette succeskriterium.

Sådan opfylder du kravet

• Par hvert <input>, <textarea> og <select> med en <label for="…">, hvis for-attribut matcher input-id.
• Brug aldrig placeholder-tekst som det eneste label — placeholders forsvinder ved fokus og har dårlig kontrast.
• Angiv obligatoriske felter synligt (asterisk, ordet „obligatorisk“ eller aria-required="true") og forklar konventionen øverst i formularen.
• Angiv det forventede format på forhånd, ikke efter at brugeren har begået en fejl: „Dato (DD/MM/ÅÅÅÅ)“ eller „Telefonnummer, f.eks. 12 34 56 78.“
• For grupper af afkrydsningsbokse eller radioknapper: brug <fieldset> og <legend> til at mærke gruppen.
• For ikon-only-input eller filterbars: brug aria-label til at give et meningsfuldt navn.

Typiske fejl

• Formularer, hvor placeholder-tekst er det eneste label og forsvinder, så snart brugeren begynder at skrive.
• Obligatoriske felter markeret kun med røde stjerner uden programmatisk tilknytning.
• Fødselsdatoinput, der forventer et bestemt format og kun fortæller brugeren det, efter de fejler validering.
• Søgeinput mærket med et forstørrelsesglas-ikon og intet tilgængeligt navn.
• Login-formularer, hvor brugernavn- og adgangskodefelter er visuelt placeret ved siden af labels, men labels ikke er programmatisk tilknyttet.

Hvorfor det er vigtigt

Formularer er stedet, hvor de fleste brugere interagerer med et website — tilmeld dig, betal, kontakt, support, planlæg. Umærkede eller utilstrækkeligt mærkede formularer udelukker skærmlæserbrugere fuldstændigt, fordi de ikke kan se, hvilke data de enkelte felter forventer. De svigter også dyslektiske brugere, der mister konteksten, så snart en placeholder forsvinder, og brugere med kognitive handicap, der drager fordel af formatvejledning på forhånd.

Labels er også bærende for adgangskodeadministratorer, autofyld og stemmestyringssoftware, som alle bruger labeltekst til at matche felter. En velkodet formular gavner alle.