Hur man skapar tillgängliga webbformulär

Sep 12, 2025

Hur

Former är en viktig del av webben eftersom de ansluter användare till ditt företag och hjälper dem att uppnå vad de kom till din webbplats eller app för. Med det sagt vill du se till att alla dina användare kan använda dina formulär utan att behöva lida en hemsk upplevelse. Målet är att göra dessa viktiga användarinteraktioner så friktionslösa som möjligt.

Även om det är sant att byggnadsformer kan vara en svår uppgift ibland, vilket gör dem måttligt tillgängliga är inte så komplicerat som du kanske tror (en bra Website Builder kommer att göra det super-enkelt). Det finns ofta ursäkter som kastas runt som "Vi har inte tid att oroa dig för tillgänglighet" eller "Vi gör det tillgängligt senare". Dessa ursäkter är ofta (om inte alltid) är ogiltiga och du kan hjälpa ditt lag att ändra denna tankegång.

Letar du efter mer råd? Vi har täckt med inlägg om ämnen från webbhotell till molnlagring .

13 bästa bitar av användarprogramvara

Här är några frågor du bör tänka på när du bygger formulär:

Vilka svårigheter kan någon med visuella nedskrivningar med min form?
Har användaren en tydlig indikation på vilka data som förväntas för inmatning?
Är formuläret lätt att använda - kommer användarna att kunna förstå det snabbt?
Kan jag använda tangentbordet för att slutföra formuläret?

Hur man gör en grundläggande prenumerationsformulär

Jag har gett dig en startkod som hjälper dig att komma framåt. Väl börja med det här och slutligen komma till det här .

Jag har gett dig några grundläggande styling och element som skulle göra en enkel prenumerationsformulär men det finns mycket vi kan göra här för att göra detta formulär mer användbar. Med allt du skapar, kommer du med bra semantisk HTML att få dig en lång väg.

Låt oss börja med att ansluta & LT; Input & GT; element till deras respektive & LT; Etikett & GT; s. Vi gör det genom att ge & LT; Input & GT; ett ID och använder det som för attribut för & LT; Etikett & GT; . Vi kan använda "namn" och "e-post" för dessa och vi har redan gjort två saker:

Vi har programmatiskt tillhörande etiketten till ingången. Fördelen med detta är att det kommer att läsa etiketten till en skärmläsare användare om den ingången är inriktad.
Användaren kan nu klicka på etiketten och respektive ingång kommer att fokuseras, så användarna har nu en större målstorlek.

Nu när våra ingångar och etiketter är alla anslutna, kan vi definiera HTML-ingångstyperna. Dessa är verkligen användbara och ett super enkelt sätt att ge en utmärkt användarupplevelse. Lägger till typ Attributet hjälper användaren automatiskt att fylla i formuläret och kommer också att ge ett mer lämpligt tangentbord för mobila användare. För vårt användningsfall kan vi göra Typ = "Text" För namninmatningen och TYPE = "EMAIL" för e-postinmatningen.

Vi vill också att våra användare har en bra uppfattning om vilken typ av data (och dess formatering) vi förväntar oss av dem. Här är det ganska uppenbart men det är inte alltid fallet. Det är i allmänhet god praxis att tillhandahålla en etikett som alltid är synlig och en platshållare som kommunicerar den förväntade ingången. Det betyder inte att använda Platshållare Attribut som en visuell etikett för ingångar där etiketten inte kan ses när en användare börjar skriva. Detta har varit en populär övning för många utvecklare och behöver verkligen läggas i sängen en gång för alla. Vi kan ge en platshållare av "ex. Jane Doe" för namnet och "ex. [email protected]" för e-postmeddelandet.

Nu kan vi komma till jobbet med fokus stat styling. Standard styling av fokusstillstånd är olika mellan webbläsarna och vi kan förbättra vad standard styling kan vara för att göra det mer användarvänligt. I vårt fall här vill vi att ingångarna har en tjock, färgad skiss som matchar knappen.

14 Enkla sätt att göra din webbplats mer tillgänglig

Lägg till fokusstilar för att mata in väljaren

Slutligen måste vi lägga till några fokusstilar runt knappelementet. Detta är ofta förbises men kan verkligen hjälpa tangentbords-bara användare vet var de är. Vi måste lägga till det här & amp; :: Moz-Focus-Innner Bit för att bli av med någon standard styling i Firefox (du kanske vill spara den här näsan för framtida bruk).

Precis som det har vi en grundläggande prenumerationsformulär du kan vara stolt över och förbättra. Eftersom vi har använt bra semantik, är formuläret tillgängligt via tangentbordet (försök med fliken och mellanslagstangenterna). Färgerna som används för knappen är ett färgförhållande på 11,51, som uppfyller AAA-standarderna för WCAG (riktlinjer för webbinnehåll tillgänglighet). Vi har angivit etiketter för både visuella användare och skärmläsare, liksom stylade fokusstater för våra tangentbord-med hjälp av vänner. Slutligen märka att teckensnittet är inställd på 18px i kroppen. Detta gör vår form mycket mer läsbar (du bör försöka stanna över 14px).

Att designa och bygga med tillgänglighet i åtanke tar övning men du kommer att bli en bättre utvecklare för det och hjälpa till att göra webben en bättre plats.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Generera, den prisbelönta konferensen för webbdesigners, återgår till NYC den 24-25 april! Klicka på bilden för att boka en biljett

Denna artikel publicerades ursprungligen i utgåva 316 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 316 här eller prenumerera här .

Relaterade artiklar:

Fix tillgänglighet misslyckas med det här fria verktyget
50 fantastiska nya verktyg för utvecklare år 2019
Hur är du tillgänglig?

Hur man skapar tillgängliga webbformulär

Hur man gör en grundläggande prenumerationsformulär

Lägg till fokusstilar för att mata in väljaren

Hur - Mest populära artiklar

Cloud Storage för foton och bilder: Hur man väljer det bästa molnet för ditt arbete

Hur man skannar en person på mindre än fem minuter

Skapa en animerad ångtexteffekt

Kom igång med WebGL med tre.js

Master negativ målning i akvarell

Bygg en enkel musikspelare med reagera

Hur man skapar 3D-hår och päls

Skapa ett furigt 3D-tecken från början

Kategorier