Formularer er en central del af mange websites – fra kontaktfelter og tilmeldinger til betaling og login. Men for mange brugere kan selv en simpel formular være en barriere, hvis den ikke er designet med tilgængelighed for øje. En utilgængelig formular kan betyde, at brugere med synshandicap, motoriske udfordringer eller kognitive vanskeligheder ikke kan gennemføre en opgave. Heldigvis kan du med nogle enkle principper gøre dine formularer langt mere brugervenlige for alle.

Start med tydelige labels og instruktioner

En af de vigtigste faktorer for tilgængelighed er, at brugeren forstår, hvad der forventes i hvert felt. Sørg for, at alle felter har klare og synlige labels, der beskriver formålet – fx “E-mailadresse” i stedet for blot “E-mail”. Undgå at bruge kun placeholder-tekst som erstatning for labels, da den forsvinder, når brugeren begynder at skrive, og dermed kan skabe forvirring.

Hvis et felt kræver et særligt format – som et telefonnummer eller en adgangskode – så skriv det tydeligt i en kort hjælpetekst. Det gør det lettere for alle, men især for brugere med kognitive udfordringer, at udfylde formularen korrekt første gang.

Gør fejlmeddelelser forståelige og hjælpsomme

Fejlmeddelelser er ofte en kilde til frustration. I stedet for blot at skrive “Fejl i formularen”, bør du forklare præcist, hvad der er galt, og hvordan brugeren kan rette det. For eksempel: “Din e-mailadresse skal indeholde et @-tegn.”

Vis fejlmeddelelser tæt på det felt, hvor fejlen opstår, og brug farver med tilstrækkelig kontrast. Husk, at farve alene ikke må være det eneste signal – kombiner fx rød farve med et ikon eller en tekst, så også farveblinde brugere kan forstå beskeden.

Brug logisk rækkefølge og korrekt tabulatorrækkefølge

En god formular følger en naturlig og logisk rækkefølge, så brugeren kan bevæge sig fra felt til felt uden at miste overblikket. For brugere, der navigerer med tastatur eller skærmlæser, er det afgørende, at tabulatorrækkefølgen (den rækkefølge, felterne får fokus i) er korrekt. Test derfor, at man kan udfylde hele formularen uden mus.

Grupper relaterede felter sammen – fx navn og adresse – og brug overskrifter eller fieldsets til at skabe struktur. Det hjælper både synlige brugere og dem, der får indholdet læst op.

Sørg for tilstrækkelig kontrast og tydelige markeringer

Visuelle markeringer som rammer, farver og fokusfelter gør det lettere at se, hvor man befinder sig i formularen. Sørg for, at kontrasten mellem tekst og baggrund lever op til WCAG-standarderne (mindst 4,5:1 for almindelig tekst). Når et felt er aktivt, bør det være tydeligt markeret – fx med en blå eller mørk ramme, der også kan ses af brugere med nedsat syn.

Undgå at stole på farve alene til at formidle information. Hvis et felt er obligatorisk, så markér det med både farve og tekst, fx “(påkrævet)”.

Gør knapper og handlinger entydige

Knapper som “Send”, “Gem” eller “Tilmeld” skal være lette at finde og forstå. Brug klare ord, der beskriver handlingen, og undgå vage betegnelser som “OK” eller “Fortsæt”. Hvis der er flere knapper i samme formular, så sørg for, at deres funktioner er tydeligt adskilt – fx “Gem kladde” og “Send endelig”.

For brugere med motoriske udfordringer er det vigtigt, at knapperne har en passende størrelse og afstand, så de kan klikkes uden fejl. Det gælder især på mobile enheder.

Test med rigtige brugere – og med hjælpemidler

Selv den bedst planlagte formular kan rumme skjulte barrierer. Derfor er det en god idé at teste den med forskellige brugere – herunder personer, der bruger skærmlæsere, tastaturnavigation eller stemmestyring. Du kan også selv prøve at navigere uden mus for at se, om alt fungerer logisk.

Der findes desuden værktøjer, der kan hjælpe med at tjekke tilgængeligheden automatisk, men de kan ikke erstatte menneskelig test. Den bedste indsigt får du, når du ser, hvordan rigtige mennesker interagerer med din løsning.

Læs også:

Samspillet mellem designere, udviklere og projektledere – sådan får I samarbejdet til at fungere i webprojekter

Web

Et vellykket webprojekt kræver mere end gode idéer – det kræver et stærkt samspil mellem designere, udviklere og projektledere. Læs, hvordan I skaber fælles forståelse, styrker kommunikationen og får samarbejdet til at fungere i praksis.

Versionsstyring i praksis: Få styr på ændringer og undgå kaos i din kodebase

Web

Uden versionsstyring kan selv små kodeprojekter hurtigt ende i rod. Denne artikel guider dig gennem de grundlæggende principper, værktøjer og arbejdsgange, der hjælper dig med at holde styr på ændringer, samarbejde effektivt og undgå kaos i din kodebase.

Fra behov til design: Sådan planlægger du et brugercentreret webdesign

Web

Et vellykket webdesign starter med forståelsen af brugerne. Denne guide viser, hvordan du planlægger et brugercentreret webdesign – fra behovsanalyse og målfastsættelse til test og justering – så du skaber digitale løsninger, der fungerer i praksis.

Tænk fremad: Planlæg din full-stack-applikation til fremtidige udvidelser og integrationer

Web

Lær hvordan du planlægger din full-stack-applikation med fokus på fremtidig skalering, fleksibilitet og integration. Artiklen guider dig gennem principperne for modulær arkitektur, teknologivalg og dokumentation, så du undgår dyre ombygninger senere.

Tilgængelighed gavner alle

At gøre formularer tilgængelige handler ikke kun om at overholde lovkrav – det handler om at skabe en bedre brugeroplevelse for alle. En tydelig, logisk og fejltolerant formular gør det lettere for alle brugere at gennemføre deres opgaver, uanset om de har et handicap, sidder på en mobil i sollys eller blot er trætte efter en lang dag.

Når du designer med tilgængelighed i tankerne, skaber du ikke bare et mere inkluderende website – du skaber et mere effektivt og brugervenligt et.