Het maken van toegankelijke webformulieren

Feb 1, 2026

Procedures

Formulieren zijn een essentiële component van het web omdat ze gebruikers aansluiten op uw bedrijf en hen helpen bereiken wat ze naar uw site of app zijn gekomen. Dat gezegd hebbende, wil je ervoor zorgen dat al je gebruikers in staat zijn om je formulieren te gebruiken zonder een vreselijke ervaring te hoeven lijden. Het doel is om deze belangrijke gebruikersinteracties als wrijvingsloos mogelijk te maken.

Hoewel het waar is dat bouwvormen soms een moeilijke taak kunnen zijn, waardoor ze matig toegankelijk zijn, is niet zo gecompliceerd als je zou denken (een goed website bouwer zal het super-simpel maken). Er zijn vaak excuses gegooid als 'we hebben geen tijd om je zorgen te maken over toegankelijkheid' of 'we zullen het later toegankelijk maken'. Deze excuses zijn vaak (zo niet altijd) ongeldig en u kunt uw team helpen deze mindset te veranderen.

Op zoek naar meer advies? We hebben je bedekt met berichten op onderwerpen van web hosting naar cloud opslag

13 beste stukjes gebruikerstestsoftware

Hier zijn enkele vragen die u moet overwegen bij het bouwen van formulieren:

Welke moeilijkheden kan iemand met visuele beperkingen mijn formulier gebruiken?
Heeft de gebruiker een duidelijke indicatie van welke gegevens worden verwacht voor invoer?
Is het formulier gemakkelijk in gebruik - zullen de gebruikers het snel begrijpen?
Kan ik het toetsenbord gebruiken om het formulier te voltooien?

Hoe een basisabonnementformulier te maken

Ik heb je wat startcode gegeven om je vooruit te helpen. Goed Begin hiermee en eventueel krijg hiernaar

Ik heb je een aantal basisstijl en elementen verstrekt die een eenvoudig abonnementsformulier vormen, maar er is veel die we hier kunnen doen om dit formulier bruikbaar te maken. Met alles wat je maakt, zal het gebruik van goede semantische HTML je een lange weg krijgen.

Laten we beginnen met het verbinden van de & LT; INPUT & GT; elementen naar hun respectieve & LT; Label & GT; s. We doen dit door de & LT; INPUT & GT; een ID en het gebruik van dat als het attribuut voor de & LT; Label & GT; We kunnen hiervoor "naam" en "e-mail" gebruiken en we hebben al twee dingen gedaan:

We hebben het etiket programmatisch aan de invoer gekoppeld. Het voordeel hiervan is dat het het label zal lezen aan een schermlezer-gebruiker als die ingang is gericht.
De gebruiker kan nu op het etiket klikken en de respectieve input zal gefocust zijn, zodat gebruikers nu een grotere doelgrootte hebben.

Nu onze inputs en labels allemaal zijn bedrukt, kunnen we de HTML-invoertypen definiëren. Deze zijn erg handig en een super eenvoudige manier om een uitstekende gebruikerservaring te geven. Het toevoegen van de type Attribuut helpt de gebruiker automatisch uw formulier en biedt ook een beter toetsenbord voor mobiele gebruikers. Voor ons gebruik Case kunnen we doen Type = "Tekst" Voor de naam van de naam en Type = "E-mail" voor de e-mailinvoer.

We willen ook dat onze gebruikers een goed idee hebben van welk type gegevens (en de opmaak) die we van hen verwachten. Hier is het vrij duidelijk, maar dat is niet altijd het geval. Het is over het algemeen een goede praktijk om een label te bieden dat altijd zichtbaar is en een tijdelijke aanduiding die de verwachte input communiceert. Dit betekent niet het gebruik van de plaatshamer Attribuut als visueel label voor ingangen waar het label niet zichtbaar is zodra een gebruiker begint te typen. Dit was een populaire praktijk voor veel ontwikkelaars en moet echt voor eens en voor altijd worden geplaatst. We kunnen een tijdelijke aanduiding geven van "Ex. Jane Doe" voor de naam en "ex. [email protected]" voor de e-mail.

Nu kunnen we werken aan de focus staat styling. De standaardstyling van focusstaten zijn verschillend tussen de browsers en we kunnen verbeteren wat de standaardstyling kan zijn om het meer gebruiksvriendelijker te maken. In ons geval hier willen we dat de inputs een dikke, gekleurde omtrek hebben die overeenkomt met de knop.

14 eenvoudige manieren om uw website toegankelijker te maken

Voeg focusstijlen toe aan invoerkiezer

Ten slotte moeten we enkele focusstijlen rond het knopelement toevoegen. Dit wordt vaak over het hoofd gezien, maar kan echt de gebruikers van het toetsenbord helpen weten waar ze zijn. We moeten dit toevoegen & AMP; :: MOZ-FOCUS-INNNER Bit om een aantal standaardstyling in Firefox te verwijderen (misschien wil je dat fragment opslaan voor toekomstig gebruik).

Net zoals dat, we hebben een basisabonnementformulier waar je trots op kunt zijn en verbeteren. Omdat we goede semantiek hebben gebruikt, is het formulier alleen toegankelijk via toetsenbord (probeer het tabblad en de spatiebalk / Enter-toetsen te gebruiken). De kleuren die voor de knop worden gebruikt, zijn een kleurverhouding van 11.51, die voldoen aan de AAA-normen voor WCAG (Toegankelijkheidsrichtlijnen voor webinhoud). We hebben labels verstrekt voor zowel visuele gebruikers als screen-lezer-gebruikers, evenals gestileerde focusstaten voor onze toetsenboard-gebruik van vrienden. Merk op dat het lettertype is ingesteld op 18px in het lichaam. Dit maakt onze vorm veel meer leesbaar (u moet proberen boven 14px te blijven).

Ontwerpen en bouwen met toegankelijkheid in gedachten neemt oefenen, maar je zult er een betere ontwikkelaar voor zijn en helpen het web een betere plek te maken.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Genereer, de bekroonde conferentie voor webontwerpers, keert terug naar NYC op 24-25 april! Klik op de afbeelding om een ticket te boeken

Dit artikel is oorspronkelijk gepubliceerd in kwestie 316 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop hier nummer 316 of Abonneer hier

Gerelateerde artikelen:

Fix Toegankelijkheid mislukt met deze gratis tool
50 Geweldige nieuwe hulpmiddelen voor ontwikkelaars in 2019
Hoe toegankelijk zijn uw ontwerpen?

Het maken van toegankelijke webformulieren

Hoe een basisabonnementformulier te maken

Voeg focusstijlen toe aan invoerkiezer

Procedures - Meest populaire artikelen

Bouw een AI-aangedreven Chatbot

Hoe snel handen schetsen

Affinity Designer: Hoe de Export Persona te gebruiken

Converteer Flash Games naar HTML5

Een inleiding tot CSS Aangepaste eigenschappen

Maak een interactieve parallax-afbeelding

Maak een betere personage-animaties in Maya

Voorbereiden van illustratorafbeeldingen voor na effecten

Categorieën