1 av 4 vuxna amerikaner lever med någon form av funktionsnedsättning. Om ditt formulär inte är tillgängligt stänger du ute en fjärdedel av din potentiella publik innan de ens når skickaknappen.
Ett tillgängligt formulär fungerar för alla. Det gäller de som bara använder tangentbord. De som lyssnar via skärmläsare. Användare med nedsatt syn. De med darrningar som behöver extra tid för att fylla i fält. Ingen särskild design, ingen extra komplexitet. Bara ett formulär som är byggt så att alla de här människorna faktiskt kan använda det.
Tydliga etiketter. Tangentbordsnavigering. Felmeddelanden som en skärmläsare kan läsa upp. Tillräcklig kontrast så att användare med nedsatt syn kan läsa texten. Det är inga extrafunktioner. Det är den nivå som WCAG 2.1 AA och Americans with Disabilities Act kräver från och med april 2026.
Vad som gör tillgängliga formulär annorlunda
Ta vilket kontaktformulär som helst så hittar du samma misstag. Ett textfält med platshållare men ingen synlig etikett. En kryssruta utan förklaring av vad den gör. Ett felmeddelande i röd text som en skärmläsare inte kan läsa upp.
De flesta formulär byggs för musanvändare, och tillgängligheten läggs till i efterhand som en eftertanke. Ett tillgängligt formulär fungerar tvärtom. Det utgår från början från att människor använder det på olika sätt. Vissa med mus, vissa bara med tangentbord. Vissa läser det, vissa lyssnar på en skärmläsare.
Det ändrar hur du bygger formuläret. Platshållare blir värdelösa utan etiketter. Röda asterisker blir värdelösa utan text. En visuell layout som fungerar för musanvändare kan fånga tangentbordsanvändare. Ett tillgängligt formulär är inte svårare att bygga. Det kräver bara att du tänker på andra sätt att interagera än med musen.
Därför spelar det roll
Lagstadgad tidsfrist. Avsnitt II i ADA kräver WCAG 2.1 AA senast den 24 april 2026. Att inte följa kraven är inte längre en risk. Det är ett aktuellt ansvar.
Affärseffekt. Besökare med funktionsnedsättning spenderar riktiga pengar. Ett tillgängligt formulär ökar andelen slutförda formulär för alla, eftersom tydliga etiketter hjälper alla användare och inte bara personer med funktionsnedsättning. Upptagna användare som skummar på mobilen klockan 6 på morgonen. Vana användare som navigerar med tangentbord. Alla.
Fördel för SEO. Sökmotorer föredrar sidor där interaktiva element har etiketter och går att navigera med tangentbord. Tillgängliga formulär rankar bättre.
Vad tillgängliga formulär faktiskt behöver
Synliga etiketter på varje fält
Varje fält behöver en etikett. Inte en platshållare som försvinner. Inte ett title-attribut. En riktig etikett som sitter där på sidan.
En skärmläsare läser först upp etiketten och anger sedan fälttypen. "Namn, textfält." Användaren vet vad hen ska göra. Utan etikett får du "textfält" och inget mer. Användaren har ingen aning om vad hen ska skriva.
För seende användare fungerar etiketter som på papper. De talar om vad som ska stå i varje ruta. De gör också den klickbara ytan större. Koppla etiketten till fältet med attributet for, så kan användare klicka på antingen etiketten eller fältet för att markera det. På mobilen spelar den större träffytan roll.
Fungera med enbart tangentbord
Många rör aldrig en mus. Motoriska funktionsnedsättningar, nedsatt syn, skärmläsare. De här användarna navigerar helt med tangentbord. Om ditt formulär kräver en mus är det inte tillgängligt.
Testa det. Dra ut musen. Gå igenom formuläret med bara tabbtangenten, piltangenterna och Enter. Du ska kunna nå varje fält, välja varje alternativ och skicka in utan att flytta händerna.
Fokusramen måste synas i varje steg. Inga osynliga fokuslägen. Användare behöver veta var de är i formuläret. Och tabbordningen spelar roll. Fälten ska följa varandra från vänster till höger och uppifrån och ned, så som formuläret läses. Om din layout hoppar runt eller döljer fält bryts tabbordningen och tangentbordsanvändare fastnar.
Felmeddelanden som faktiskt läses upp
Röd text högst upp i formuläret betyder ingenting för en användare av skärmläsare. Hen skickar in, hör tystnad och försöker igen. Sedan ger hen upp.
Koppla felet till det specifika fält där det uppstod. När en användare av skärmläsare tabbar till fältet läses felet upp. Och låt felmeddelandet säga vad som ska rättas, inte bara "Ogiltigt". I stället för "Ogiltig inmatning" skriver du "E-postadressen måste innehålla ett @-tecken."
Använd ARIA-attribut som aria-describedby för att koppla felmeddelandet till fältet. När fokus hamnar på fältet läser skärmläsaren upp felet automatiskt. Ingen gissning.
Gör texten läsbar för användare med nedsatt syn
Ljusgrå etiketter på vit bakgrund är osynliga för någon med nedsatt syn. WCAG 2.1 AA kräver kontrastförhållandet 4,5:1 för normal text. Mörk text på ljus bakgrund, eller ljus text på mörk bakgrund. Kontrasten måste vara tydlig.
Större text (18 punkter eller mer) kan ha kontrasten 3:1. Allt annat behöver 4,5:1. Ett verktyg för kontrastkontroll tar 5 sekunder. Kör varje etikett, knapp och felmeddelande genom ett före lansering.
Använd aldrig enbart färg för att markera obligatoriska fält. En röd asterisk betyder ingenting för en färgblind användare. Lägg till ordet "obligatoriskt" bredvid fältet. Skärmläsare läser upp det. Seende användare ser det. Alla förstår text.
Råd för varje fälttyp i tillgängliga formulär
Textfält och textrutor
Namn, e-post, telefon: alla behöver en etikett direkt ovanför eller bredvid. Använd HTML-elementet <label> med ett for-attribut som matchar fältets id.
Om fältet förväntar sig ett visst format, säg det. "Format: 555-123-4567" hjälper alla, särskilt personer som fungerar bättre med tydliga instruktioner.
Textrutor ska se ut som att de tar emot längre svar. En ruta på en rad med etiketten "Meddelande" läses som ett kort svar. En högre ruta signalerar "ge mig mer". Storleken spelar roll.
Rullgardinsmenyer och alternativknappar
Varje rullgardinsmeny behöver en etikett. "Välj ett alternativ" och "Ja/Nej" utan sammanhang är värdelösa. En användare av skärmläsare har ingen aning om vilken fråga du ställer. Gör menyns etikett tydlig med vilket val det gäller.
Alternativknappar ska ligga i en fieldset med en legend. Legenden ställer frågan. Alternativen svarar på den. "Vilket beskriver bäst ditt användningsområde?" med alternativ som "E-handel", "Media", "SaaS". En skärmläsare läser upp legenden och sedan varje alternativ. Användaren förstår att hen väljer ur en grupp och vad gruppen gäller.
Kryssrutor
En etikett till en kryssruta ska läsas naturligt. "Jag godkänner användarvillkoren" som etikett, med kryssrutan bredvid. Inte en naken kryssruta utan text, så att användare får gissa vad den gör.
Om det finns stödjande information, som en länk till de fullständiga villkoren, lägg den direkt intill kryssrutan. Göm den inte. Användare behöver veta vad de godkänner innan de kryssar i rutan.
Grupper av kryssrutor fungerar som grupper av alternativknappar. En legend namnger gruppen och varje alternativ får sin egen etikett.
Knappar
Knapptexten ska säga vad som händer. "Skicka." "Skicka in." "OK" fungerar för bekräftelser. "Kör" gör det inte. Inga allmänna etiketter.
Om du har flera knappar, gör dem tydligt olika. "Avbryt" och "Skicka" är tydliga. Två knappar som båda säger "Nästa" är det inte: en användare av skärmläsare hör "nästa-knapp, nästa-knapp" och har ingen aning om vilken som är vilken.
Var formulär finns på din webbplats
Kontaktformulär i popup-fönster. Anmälan till nyhetsbrev i sidfötter. Donationsformulär på sidor om uppdraget. Enkätformulär i kassan. Varje formulär, var som helst, måste vara tillgängligt.
Formulär i popup-fönster skapar en fokusfälla om du inte hanterar den. När ett modalt fönster öppnas hoppar fokus in i det. När det stängs hoppar fokus tillbaka till knappen som öppnade det. Utan det fastnar tangentbordsanvändare i att tabba genom bakgrundssidan.
På långa sidor där formulär ligger längre ned lägger du till en hoppa-över-länk. Tangentbordsanvändare ska inte behöva tabba genom 50 menyval för att nå ditt formulär.
Vanliga misstag
Att lita på platshållartext i stället för etiketter
En platshållare som säger "Ange din e-postadress" försvinner i samma stund som någon börjar skriva. Nu har användaren ingen aning om vad fältet gällde. Skärmläsare ser den aldrig alls.
Använd en riktig etikett. Vill du ha en platshållare för formattips är det okej. Men använd den aldrig som själva etiketten.
Att använda enbart färg för obligatoriska fält
En röd asterisk är osynlig för färgblinda användare. En ikon är osynlig för skärmläsare. Använd ordet "obligatoriskt" i text. Alla förstår text.
Att hoppa över manuell testning
Rätt HTML-struktur på pappret betyder inte att ditt formulär fungerar i verkligheten. Etiketter kan sitta för långt från fälten. Fokusramar kan vara osynliga. Felmeddelanden kan läsas upp men inte flytta fokus till fältet.
Testa med tangentbord. Testa med skärmläsare. Det finns gratis skärmläsare för Windows och betalda som är branschstandard. Använd den inbyggda skärmläsaren om du testar på iOS. Automatiska kontroller fångar de uppenbara problemen. Riktig testning fångar resten.
Att lägga till tidsgränser
En användare med darrningar skriver långsamt. En användare av skärmläsare behöver tid för att lyssna på alla etiketter och instruktioner. En gräns på 5 minuter fångar användare som behöver 10.
Ta bort tidsgränser om du kan. Om du måste ha dem, låt användare förlänga tiden två gånger innan sessionen tar slut.
Så bygger WEMASY tillgängliga formulär
WEMASY-formulär är byggda för att vara tillgängliga från början, inte som en eftertanke. Varje mall har rätt etiketter. Fokus hanteras automatiskt. Fel läses upp för skärmläsare. Färgkontrasten uppfyller WCAG 2.1 AA som standard.
Anpassa utan att bryta tillgängligheten. Lägg till fält, ändra etiketter och ordna om layouten. Den underliggande strukturen förblir tillgänglig. Inbyggd validering läser upp fel för skärmläsare.
Läs mer i vår kompletta guide till formulär, eller se vad som ingår i varje WEMASY-plan.