Sådan oprettes tilgængelige webformularer

Feb 2, 2026

hvordan

Forms er en væsentlig del af internettet, fordi de forbinder brugere med din virksomhed og hjælper dem med at opnå, hvad de kom til dit websted eller app for. Når det er sagt, vil du sørge for, at alle dine brugere er i stand til at bruge dine former uden at skulle lide en forfærdelig oplevelse. Målet er at gøre disse nøglebrugerinteraktioner som friktionsfri som muligt.

Selv om det er sandt, at bygningsformer kan være en vanskelig opgave til tider, gør dem moderat tilgængelige ikke så komplicerede som du måske tror (en god Website Builder. vil gøre det super-simpelt). Der er ofte undskyldninger kastet rundt som "Vi har ikke tid til at bekymre sig om tilgængelighed" eller "Vi gør det tilgængeligt senere '. Disse undskyldninger er ofte (hvis ikke altid) ugyldige, og du kan hjælpe dit hold til at ændre denne tankegang.

Leder du efter flere råd? Vi har fået dig dækket af indlæg på emner fra Web Hosting. til Sky lagring .

13 bedste stykker af brugertestsoftware

Her er nogle spørgsmål, du bør overveje, når du bygger former:

Hvilke vanskeligheder kan en person med visuelle nedskrivninger ved at bruge min formular?
Har brugeren en klar indikation af, hvilke data der forventes for input?
Er formularen nem at bruge - vil brugerne være i stand til at forstå det hurtigt?
Kan jeg bruge tastaturet for at fuldføre formularen?

Sådan laver du en grundlæggende abonnementsformular

Jeg har givet dig en startkode for at hjælpe dig med at komme videre. Godt Begynd med dette og til sidst. komme til dette .

Jeg har givet dig nogle grundlæggende styling og elementer, der ville gøre op en simpel abonnementsform, men der er meget, vi kan gøre her for at gøre denne form mere brugbar. Med alt hvad du opretter, får du en god semantisk HTML en lang vej.

Lad os begynde med at forbinde & lt; input & gt; elementer til deres respektive & lt; label & gt; s. Det gør vi ved at give & lt; input & gt; et id og bruger det som for attributten for & lt; label & gt; . Vi kan bruge "navn" og "email" for disse, og vi har allerede gjort to ting:

Vi har programmatisk associeret etiketten til input. Fordelen ved dette er, at den vil læse etiketten til en skærmlæser bruger, hvis den pågældende indgang er fokuseret.
Brugeren kan nu klikke på etiketten, og den respektive indgang vil blive fokuseret, så brugerne har nu en større målstørrelse.

Nu hvor vores input og etiketter er alle sammenbrudte, kan vi definere HTML-indgangstyperne. Disse er virkelig nyttige og en super nem måde at give en fremragende brugeroplevelse på. Tilføjelse af type Attribut vil hjælpe brugeren automatisk-fylde din formular og vil også give et mere passende tastatur til mobile brugere. Til vores brugssag kan vi gøre Type = "Tekst" for navnet input og Type = "Email" til e-mail-indgangen.

Vi vil også have vores brugere at få en god ide om, hvilken type data (og dens formatering) vi forventer af dem. Her er det ret indlysende, men det er ikke altid tilfældet. Det er generelt god praksis at give en etiket, der altid er synlig og en pladsholder, der kommunikerer den forventede input. Dette betyder ikke at bruge pladsholder. Attribut som en visuel etiket til input, hvor etiketten ikke kan ses, når en bruger begynder at skrive. Dette har været en populær praksis for mange udviklere og behøver virkelig at blive sat i seng en gang for alle. Vi kan give en pladsholder af "ex. Jane DOE" for navnet og "ex. [email protected]" for e-mailen.

Nu kan vi komme på arbejde på fokus stat styling. Standard styling af fokusstaterne er forskellige mellem browserne, og vi kan forbedre, hvad standard styling kan være for at gøre det mere brugervenligt. I vores tilfælde her vil vi have inputene til at have en tyk, farvet omrids, der matcher knappen.

14 Nemme måder at gøre dit websted mere tilgængelig

Tilføj fokusformater til input vælger

Endelig skal vi tilføje nogle fokusformater omkring knapelementet. Dette er ofte overset, men kan virkelig hjælpe tastatur-kun brugere ved, hvor de er. Vi skal tilføje dette & Amp; :: MOZ-Focus-Innner Bit for at slippe af med nogle standard styling i Firefox (du vil måske gemme det snippet til fremtidig brug).

Ligesom det har vi en grundlæggende abonnementsformular, du kan være stolt af og forbedre på. Fordi vi har brugt god semantik, er formularen kun tilgængelig via tastatur (prøv at bruge tasterne Tab og mellemrum / indtastningstaster). De farver, der bruges til knappen, er et farveforhold på 11,51, opfylder AAA-standarderne for WCAG (Web-indholdsretningsvejledning). Vi har leveret etiketter til både visuelle brugere og skærmlæserbrugere, såvel som stylede fokusstater for vores tastatur-bruger venner. Endelig bemærke, at skrifttypen er indstillet til 18px i kroppen. Dette gør vores form meget mere læsbar (du bør forsøge at forblive over 14px).

Design og bygning med tilgængelighed i tankerne tager praksis, men du vil være en bedre udvikler for det og hjælpe med at gøre internettet 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ønnede konference for webdesignere, vender tilbage til NYC den 24-25 april! Klik på billedet for at bestille en billet

Denne artikel blev oprindeligt offentliggjort i udstedelse 316 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 316 her eller Abonner her .

Relaterede artikler:

Fix tilgængelighed mislykkes med dette gratis værktøj
50 Awesome nye værktøjer til udviklere i 2019
Hvor tilgængelig er dine designs?

Sådan oprettes tilgængelige webformularer

Sådan laver du en grundlæggende abonnementsformular

Tilføj fokusformater til input vælger

hvordan - Mest populære artikler

21 Måder at forbedre produktiviteten med NPM

Sådan implementeres lys eller mørke tilstande i CSS

Sådan maler du en Elven Maiden

Sådan forbedres din karakterkunst

Skærpe din hårde overflade modellering i 3ds max

Gør realistisk 3D-hår og pels i 3DS MAX og V-RAY

Opret bedre tegn animationer i Maya

Byg en simpel musikafspiller med reagere

Kategorier