1 ud af 4 voksne amerikanere lever med en form for handicap. Hvis din formular ikke er tilgængelig, afskærer du en fjerdedel af dit mulige publikum, før de overhovedet når send-knappen.
En tilgængelig formular virker for alle. Det gælder folk, der kun bruger tastatur. Folk, der lytter via skærmlæsere. Brugere med nedsat syn. Folk med rystelser, der har brug for ekstra tid til at udfylde felter. Ikke noget særligt design, ingen ekstra kompleksitet. Bare en formular, der er bygget, så alle de mennesker faktisk kan bruge den.
Tydelige etiketter. Navigation med tastatur. Fejlmeddelelser, en skærmlæser kan læse højt. Nok kontrast til, at brugere med nedsat syn kan læse teksten. Det er ikke ekstra funktioner. Det er det grundlag, som WCAG 2.1 AA og Americans with Disabilities Act (ADA) kræver fra april 2026.
Hvad gør tilgængelige formularer anderledes
Tag en hvilken som helst kontaktformular, og du finder de samme fejl. Et tekstfelt med en pladsholder, men uden synlig etiket. Et afkrydsningsfelt uden forklaring af, hvad det gør. En fejlmeddelelse i rød tekst, som en skærmlæser ikke kan læse højt.
De fleste formularer er bygget til brugere af mus, og tilgængelighed bliver skruet på bagefter som en eftertanke. En tilgængelig formular arbejder bagfra. Den regner fra start med, at folk bruger den på forskellige måder. Nogle med mus, nogle kun med tastatur. Nogle læser den, nogle lytter via en skærmlæser.
Det ændrer, hvordan du bygger formularen. Pladsholdere er ubrugelige uden etiketter. Røde stjerner er ubrugelige uden tekst. Et visuelt layout, der virker for brugere af mus, kan fange brugere af tastatur. En tilgængelig formular er ikke sværere at bygge. Du skal bare tænke over, hvordan folk bruger den ud over musen.
Derfor har det betydning
Lovkrav med frist. Title II i ADA kræver WCAG 2.1 AA senest den 24. april 2026. At overtræde reglerne er ikke længere en risiko. Det er et ansvar nu.
Betydning for forretningen. Besøgende med handicap bruger rigtige penge. En tilgængelig formular øger gennemførelsen hos alle, fordi tydelige etiketter hjælper alle brugere og ikke kun folk med handicap. Travle brugere, der scroller på mobilen klokken seks om morgenen. Superbrugere, der navigerer med tastatur. Alle.
Fordel for SEO. Søgemaskiner foretrækker sider, hvor interaktive elementer har etiketter og kan bruges med tastatur. Tilgængelige formularer rangerer højere.
Hvad tilgængelige formularer faktisk skal have
Synlige etiketter på alle felter
Hvert felt skal have en etiket. Ikke en pladsholder, der forsvinder. Ikke en title-egenskab. En rigtig etiket, der står lige der på siden.
En skærmlæser læser etiketten først og siger så felttypen. "Navn, tekstfelt." Brugeren ved, hvad de skal gøre. Uden etiket får du "tekstfelt" og intet andet. Brugeren aner ikke, hvad de skal skrive.
For seende brugere virker etiketter, som de gør på papir. De fortæller, hvad der skal stå i hver blank linje. De gør også det klikbare område større. Kobl etiketten til feltet med for-egenskaben, så kan brugerne klikke på enten etiketten eller feltet for at vælge det. På mobil har det større tryk-område betydning.
Kan bruges med tastatur alene
Mange rører aldrig en mus. Motoriske handicap, nedsat syn, skærmlæsere. De brugere navigerer helt med tastatur. Hvis din formular kræver en mus, er den ikke tilgængelig.
Test det. Tag musen ud. Gå gennem formularen med kun Tab-tasten, piletasterne og Enter. Du skal kunne nå hvert felt, vælge hver mulighed og sende uden at flytte hænderne.
Markeringen af fokus skal være synlig i hvert trin. Ingen usynlige fokustilstande. Brugerne skal vide, hvor de er i formularen. Og rækkefølgen for Tab har betydning. Felter skal følge hinanden fra venstre mod højre og oppefra og ned, som formularen læses. Hvis dit layout hopper rundt eller skjuler felter, brydes rækkefølgen, og brugere af tastatur bliver fanget.
Fejlmeddelelser, der melder sig selv
Rød tekst øverst i formularen betyder ingenting for en bruger af skærmlæser. De sender, hører stilhed og prøver igen. Så giver de op.
Kobl fejlen til det felt, hvor den skete. Når en bruger af skærmlæser trykker Tab hen til feltet, bliver fejlen læst højt. Og lad fejlmeddelelsen sige, hvad der skal rettes, ikke bare "Ugyldig". I stedet for "Ugyldig indtastning" skriv "E-mailen skal indeholde et @-tegn."
Brug ARIA-egenskaber som aria-describedby til at koble fejlmeddelelsen til feltet. Når fokus lander på feltet, læser skærmlæseren fejlen højt automatisk. Ingen gætterier.
Gør teksten læselig for brugere med nedsat syn
Lysegrå etiketter på hvid baggrund er usynlige for en med nedsat syn. WCAG 2.1 AA kræver et kontrastforhold på 4,5:1 for normal tekst. Mørk tekst på lys baggrund eller lys tekst på mørk baggrund. Kontrasten skal være tydelig.
Større tekst (18 punkt og derover) kan bruge 3:1. Alt andet skal have 4,5:1. Et værktøj til at tjekke kontrast tager 5 sekunder. Kør hver etiket, knap og fejlmeddelelse igennem et, før du går live.
Brug aldrig kun farve til at vise obligatoriske felter. En rød stjerne betyder ingenting for en farveblind bruger. Skriv ordet "obligatorisk" ved siden af feltet. Skærmlæsere læser det højt. Seende brugere ser det. Alle forstår tekst.
Råd felt for felt til tilgængelige formularer
Tekstfelter og tekstområder
Navn, e-mail, telefon: alle skal have en etiket lige over eller ved siden af. Brug HTML-elementet <label> med en for-egenskab, der passer til feltets id.
Hvis feltet forventer et bestemt format, så sig det. "Format: 555-123-4567" hjælper alle, især folk, der arbejder bedre med tydelige anvisninger.
Tekstområder skal se ud, som om de tager imod længere svar. En boks på én linje med etiketten "Besked" læses som et kort svar. En højere boks siger "skriv mere". Størrelsen har betydning.
Rullelister og radioknapper
Hver rulleliste skal have en etiket. "Vælg en mulighed" og "Ja/Nej" uden sammenhæng er ubrugelige. En bruger af skærmlæser aner ikke, hvilket spørgsmål du stiller. Gør etiketten til rullelisten klar om, hvad valget handler om.
Radioknapper skal stå i et fieldset med en legend. Legend stiller spørgsmålet. Mulighederne svarer. "Hvad beskriver bedst din brug?" med muligheder som "Netbutik", "Medier", "SaaS". En skærmlæser læser legend højt og så hver mulighed. Brugeren forstår, at de vælger fra en gruppe, og hvad gruppen handler om.
Afkrydsningsfelter
En etiket til et afkrydsningsfelt skal læses naturligt. "Jeg accepterer vilkårene" som etiket med feltet ved siden af. Ikke et nøgent felt uden tekst, hvor brugerne må gætte, hvad det gør.
Hvis der er ekstra information, som et link til de fulde vilkår, så sæt det lige ved siden af feltet. Skjul det ikke. Brugerne skal vide, hvad de accepterer, før de sætter kryds.
Grupper af afkrydsningsfelter virker som grupper af radioknapper. En legend navngiver gruppen, og hver mulighed får sin egen etiket.
Knapper
Knaptekst skal sige, hvad der sker. "Send." "Indsend." "OK" duer til bekræftelser. "Gå" gør ikke. Ingen generiske etiketter.
Hvis du har flere knapper, så gør dem forskellige. "Annuller" og "Send" er tydelige. To knapper, der begge siger "Næste", er det ikke. En bruger af skærmlæser hører "knap næste, knap næste" og aner ikke, hvilken der er hvilken.
Hvor formularer står på din hjemmeside
Kontaktformularer i pop-ups. Tilmelding til nyhedsbrev i sidefoden. Formularer til donation på sider om mission. Spørgeskemaer i betalingen. Enhver formular, hvor som helst, skal være tilgængelig.
Formularer i pop-ups skaber en fokusfælde, hvis du ikke styrer det. Når et vindue åbner, hopper fokus ind i det. Når det lukker, hopper fokus tilbage til den knap, der åbnede det. Uden det sidder brugere af tastatur fast i at trykke Tab gennem baggrundssiden.
På lange sider med formularer langt nede skal du tilføje et link til at springe over. Brugere af tastatur skal ikke trykke Tab gennem 50 punkter i menuen for at nå din formular.
Almindelige fejl
Du bruger pladsholdertekst i stedet for etiketter
En pladsholder, der siger "Skriv din e-mail", forsvinder, i det øjeblik nogen begynder at skrive. Nu aner brugeren ikke, hvad feltet var til. Skærmlæsere ser den slet ikke.
Brug en rigtig etiket. Hvis du vil have en pladsholder til tip om format, er det fint. Men brug den aldrig som selve etiketten.
Du bruger kun farve til obligatoriske felter
En rød stjerne er usynlig for farveblinde brugere. Et ikon er usynligt for skærmlæsere. Skriv ordet "obligatorisk" som tekst. Alle forstår tekst.
Du springer manuel test over
Den rette HTML-struktur på papiret betyder ikke, at din formular virker i virkeligheden. Etiketter kan stå for langt fra felterne. Fokusmarkering kan være usynlig. Fejlmeddelelser kan blive læst højt uden at flytte fokus til feltet.
Test med tastatur. Test med en skærmlæser. Der findes gratis skærmlæsere til computer, og telefoner har en indbygget. Automatiske kontroller finder de åbenlyse fejl. Rigtig test finder resten.
Du sætter tidsgrænser
En bruger med rystelser skriver langsomt. En bruger af skærmlæser skal bruge tid på at lytte til alle etiketter og anvisninger. En grænse på 5 minutter fanger brugere, der har brug for 10.
Fjern tidsgrænser, hvis du kan. Hvis du skal have dem, så lad brugerne forlænge tiden to gange, før sessionen slutter.
Sådan bygger WEMASY tilgængelige formularer
WEMASYs formularer er bygget tilgængelige fra starten og ikke som en eftertanke. Hver skabelon har rigtige etiketter. Fokus styres automatisk. Fejl bliver læst højt for skærmlæsere. Farvekontrasten opfylder som standard WCAG 2.1 AA.
Tilpas uden at bryde tilgængeligheden. Tilføj felter, ret etiketter, flyt rundt på layoutet. Den underliggende struktur forbliver tilgængelig. Indbygget kontrol læser fejl højt for skærmlæsere.
Læs mere i vores komplette guide til formularer, eller se hvad der er med i hver WEMASY-plan.