Hvordan lage tilgjengelige webskjemaer

Jan 21, 2026

hvordan

[1. 3]

Skjemaer er en viktig del av nettet fordi de kobler brukerne til virksomheten din og hjelper dem med å oppnå det de kom til nettstedet ditt eller appen din for. Når det er sagt, vil du sørge for at alle dine brukere kan bruke skjemaene dine uten å måtte lide en forferdelig opplevelse. Målet er å gjøre disse viktige brukerinteraksjonene som friksjonsløs som mulig.

Selv om det er sant at bygningsformer kan være en vanskelig oppgave til tider, noe som gjør dem moderat tilgjengelig, er ikke så komplisert som du kanskje tror (en god Nettstedbygger vil gjøre det super-enkelt). Det er ofte unnskyldninger kastet rundt som "Vi har ikke tid til å bekymre seg for tilgjengelighet" eller "Vi gjør det tilgjengelig senere". Disse unnskyldningene er ofte (hvis ikke alltid) ugyldig, og du kan hjelpe laget ditt forandre denne tankegangen.

Leter du etter mer råd? Vi har deg dekket med innlegg på emner fra Web Hosting. til skylagring .

13 beste biter av brukertesting programvare

Her er noen spørsmål du bør vurdere når du bygger former:

Hvilke vanskeligheter kan noen med synshemmede bruke skjemaet mitt?
Har brukeren en klar indikasjon på hvilke data som forventes for inngang?
Er skjemaet enkelt å bruke - vil brukerne forstå det raskt?
Kan jeg bruke tastaturet for å fullføre skjemaet?

Hvordan lage et grunnleggende abonnementsskjema

Jeg har gitt deg noen startkode for å hjelpe deg med å komme videre. Vi vil Begynn med dette og etterhvert komme til dette .

Jeg har gitt deg noen grunnleggende styling og elementer som ville gjøre opp et enkelt abonnementsskjema, men det er mye vi kan gjøre her for å gjøre dette skjemaet mer brukbart. Med alt du lager, vil du bruke god semantisk HTML deg en lang vei.

La oss starte med å koble til & lt; input & gt; elementer til deres respektive & lt; label & gt; s. Vi gjør dette ved å gi & lt; input & gt; en ID og bruker det som for attributtet for & lt; label & gt; . Vi kan bruke "navn" og "e-post" for disse, og vi har allerede gjort to ting:

Vi har programmatisk tilknyttet etiketten til inngangen. Fordelen med dette er at det vil lese etiketten til en skjermleser bruker hvis den inngangen er fokusert.
Brukeren kan nå klikke på etiketten, og den respektive inngangen vil bli fokusert, slik at brukerne nå har en større målstørrelse.

Nå som våre innganger og etiketter er alle kablet opp, kan vi definere HTML-inngangstyper. Disse er veldig nyttige og en super enkel måte å gi en utmerket brukeropplevelse på. Legger til det type Attributtet vil hjelpe brukeren automatisk å fylle ut skjemaet ditt og vil også gi et mer egnet tastatur for mobilbrukere. For vår bruk tilfelle kan vi gjøre Type = "Tekst" for navnet input og Type = "E-post" for e-postinngangen.

Vi vil også at våre brukere har en god ide om hvilken type data (og dens formatering) vi forventer av dem. Her er det ganske tydelig, men det er ikke alltid tilfelle. Det er generelt god praksis å gi en etikett som alltid er synlig og en plassholder som kommuniserer forventet inngang. Dette betyr ikke å bruke plassholder Attributt som en visuell etikett for innganger hvor etiketten ikke vises når en bruker begynner å skrive. Dette har vært en populær praksis for mange utviklere og virkelig må legges til sengs en gang for alle. Vi kan gi en plassholder av "ex. Jane Doe" for navnet og "ex. [email protected]" for e-posten.

Nå kan vi komme på jobb på fokus stat styling. Standard styling av fokusstater er forskjellige mellom nettleserne, og vi kan forbedre hva som standard styling kan være for å gjøre det mer brukervennlig. I vårt tilfelle her, vil vi at inngangene skal ha en tykk, farget oversikt som samsvarer med knappen.

14 enkle måter å gjøre nettstedet ditt mer tilgjengelig

Legg til fokusstiler for å legge inn velgeren

Til slutt må vi legge til noen fokusstiler rundt knappelementet. Dette overses ofte, men kan virkelig hjelpe tastatur-bare-brukere vet hvor de er. Vi må legge til dette & amp ;:: moz-fokus-innner Bit for å kvitte seg med noen standard styling i Firefox (du vil kanskje lagre den koden for fremtidig bruk).

På samme måte har vi et grunnleggende abonnementsskjema du kan være stolt av og forbedre på. Fordi vi har brukt gode semantikk, er skjemaet tilgjengelig via tastaturet (prøv å bruke fanen og mellomromstasten / tastene). Fargene som brukes til knappen er et fargeforhold på 11.51, som oppfyller AAA-standardene for WCAG (retningslinjer for webinnhold). Vi har gitt etiketter for både visuelle brukere og skjermleserbrukere, samt stilte fokusstater for våre tastaturbrukere. Endelig legg merke til at skrifttypen er satt til 18px. i kroppen. Dette gjør vårt skjema mye mer lesbart (du bør prøve å holde seg over 14px).

Design og bygning med tilgjengelighet i tankene tar praksis, men du vil være en bedre utvikler for det og bidra til å gjøre nettet et bedre sted.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Generer, den prisbelønte konferansen for webdesignere, returnerer til NYC den 24-25 april! Klikk på bildet for å bestille en billett

Denne artikkelen ble opprinnelig publisert i utgave 316 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 316 her eller Abonner her .

Relaterte artikler:

Fiks tilgjengelighet mislykkes med dette gratis verktøyet
50 fantastiske nye verktøy for utviklere i 2019
Hvor tilgjengelig er designene dine?

Hvordan lage tilgjengelige webskjemaer

Hvordan lage et grunnleggende abonnementsskjema

Legg til fokusstiler for å legge inn velgeren

hvordan - Mest populære artikler

Google-lysbilder: Slik designer du et dokument

Hvordan øke hastigheten på retopologi i Maya

Lag slick ui animasjoner

Hvordan designe en chatbot-opplevelse

Hvordan lage en retrologo med affinitetsdesigner

Slik prototypere en mobilapp med Adobe XD

Slik forbereder du illustratørgrafikk for ettervirkninger

Lag et responsivt dashbord med figma

Kategorier