1 op de 4 Amerikaanse volwassenen heeft een vorm van beperking. Is je formulier niet toegankelijk, dan sluit je een kwart van je potentiële publiek buiten voordat ze de verzendknop bereiken.
Een toegankelijk formulier werkt voor iedereen. Dat betekent: gebruikers die alleen een toetsenbord gebruiken. Mensen die via een schermlezer luisteren. Gebruikers met een slecht zicht. Mensen met een tremor die extra tijd nodig hebben om velden in te vullen. Geen bijzonder ontwerp, geen extra ingewikkeldheid. Gewoon een formulier dat zo is gebouwd dat al deze mensen het echt kunnen gebruiken.
Duidelijke labels. Toetsenbordnavigatie. Foutmeldingen die een schermlezer kan voorlezen. Genoeg contrast, zodat gebruikers met een slecht zicht de tekst kunnen lezen. Dit zijn geen extra functies. Het is het minimum dat WCAG 2.1 AA en de Americans with Disabilities Act sinds april 2026 eisen.
Wat toegankelijke formulieren anders maakt
Neem een willekeurig contactformulier en je vindt dezelfde fouten. Een tekstveld met een plaatshouder maar zonder zichtbaar label. Een selectievakje zonder uitleg over wat het doet. Een foutmelding in rode tekst die een schermlezer niet kan voorlezen.
De meeste formulieren zijn gebouwd voor muisgebruikers en toegankelijkheid wordt er later als bijzaak aan vastgeplakt. Een toegankelijk formulier werkt andersom. Het gaat er vanaf het begin van uit dat mensen het op verschillende manieren gebruiken. Sommigen met een muis, sommigen alleen met een toetsenbord. Sommigen lezen het, anderen luisteren naar een schermlezer.
Dat verandert hoe je het formulier bouwt. Plaatshouders zijn nutteloos zonder labels. Rode sterretjes zijn nutteloos zonder tekst. Een visuele indeling die voor muisgebruikers werkt, kan toetsenbordgebruikers insluiten. Een toegankelijk formulier is niet moeilijker te bouwen. Je moet alleen nadenken over manieren van bedienen buiten de muis om.
Waarom dit ertoe doet
Wettelijke deadline. Title II van de ADA eist WCAG 2.1 AA vóór 24 april 2026. Niet voldoen is geen risico meer. Het is een bestaande aansprakelijkheid.
Zakelijke impact. Bezoekers met een beperking geven echt geld uit. Een toegankelijk formulier verhoogt de voltooiingspercentages bij iedereen, omdat duidelijke labels alle gebruikers helpen, niet alleen mensen met een beperking. Drukke gebruikers die om 6 uur 's ochtends op mobiel scannen. Ervaren gebruikers die met het toetsenbord navigeren. Iedereen.
Voordeel voor SEO. Zoekmachines geven de voorkeur aan pagina's waarop interactieve elementen een label hebben en met het toetsenbord te bedienen zijn. Toegankelijke formulieren scoren hoger.
Wat toegankelijke formulieren echt nodig hebben
Zichtbare labels bij elk veld
Elk invoerveld heeft een label nodig. Geen plaatshouder die verdwijnt. Geen title-attribuut. Een echt label dat gewoon op de pagina staat.
Een schermlezer leest eerst het label voor en geeft dan het veldtype aan. "Naam, tekstinvoer." De gebruiker weet wat hij moet doen. Zonder label hoor je "tekstinvoer" en niets anders. De gebruiker heeft geen idee wat hij moet invullen.
Voor ziende gebruikers werken labels zoals op papier. Ze vertellen wat in elk blanco vak hoort. Ze vergroten ook het klikbare gebied. Koppel het label met het for-attribuut aan het invoerveld en gebruikers kunnen op het label of op het veld klikken om het te activeren. Op mobiel is dit grotere aanraakdoel belangrijk.
Werken met alleen een toetsenbord
Veel mensen raken nooit een muis aan. Motorische beperkingen, een slecht zicht, schermlezers. Deze gebruikers navigeren volledig met een toetsenbord. Heeft je formulier een muis nodig, dan is het niet toegankelijk.
Test het. Haal je muis los. Loop door het formulier met alleen de Tab-toets, de pijltjestoetsen en Enter. Je moet elk veld kunnen bereiken, elke optie kunnen kiezen en op verzenden kunnen drukken zonder je handen te verplaatsen.
De focusrand moet bij elke stap zichtbaar zijn. Geen onzichtbare focusstatussen. Gebruikers moeten weten waar ze in het formulier zijn. En de tabvolgorde doet ertoe. Velden moeten van links naar rechts en van boven naar beneden lopen, zoals het formulier leest. Springt je indeling rond of verbergt hij velden, dan klopt de tabvolgorde niet meer en raken toetsenbordgebruikers vast.
Foutmeldingen die zichzelf aankondigen
Rode tekst bovenaan het formulier zegt een schermlezergebruiker niets. Ze versturen, horen stilte en proberen opnieuw. Dan geven ze het op.
Koppel de fout aan het specifieke veld waar het misging. Tabt een schermlezergebruiker naar dat veld, dan wordt de fout voorgelezen. En laat de foutmelding zeggen wat je moet herstellen, niet alleen "Ongeldig." Zeg in plaats van "Ongeldige invoer" liever "Het e-mailadres moet een @-teken bevatten."
Gebruik ARIA-attributen zoals aria-describedby om de foutmelding aan het veld te koppelen. Landt de focus op het veld, dan leest de schermlezer de fout automatisch voor. Geen gokwerk.
Tekst leesbaar maken voor gebruikers met een slecht zicht
Lichtgrijze labels op een witte achtergrond zijn onzichtbaar voor iemand met een slecht zicht. WCAG 2.1 AA eist een contrastverhouding van 4,5:1 voor normale tekst. Donkere tekst op een lichte achtergrond, of lichte tekst op een donkere achtergrond. Het contrast moet duidelijk zijn.
Grotere tekst (18 punten of meer) mag 3:1 contrast hebben. Al het andere heeft 4,5:1 nodig. Een tool om contrast te controleren kost 5 seconden. Haal elk label, elke knop en elke foutmelding erdoorheen voor je live gaat.
Gebruik nooit alleen kleur om verplichte velden aan te geven. Een rood sterretje zegt een kleurenblinde gebruiker niets. Zet het woord "verplicht" naast het veld. Schermlezers lezen het voor. Ziende gebruikers zien het. Tekst begrijpt iedereen.
Advies per veld voor toegankelijke formulieren
Tekstinvoer en tekstvlakken
Naam, e-mailadres, telefoon: ze hebben allemaal een label direct erboven of ernaast nodig. Gebruik het HTML-element <label> met een for-attribuut dat overeenkomt met het id van het invoerveld.
Verwacht het veld een bepaald formaat, zeg dat dan. "Formaat: 555-123-4567" helpt iedereen, vooral mensen die beter werken met expliciete instructies.
Tekstvlakken moeten eruitzien alsof ze langere antwoorden accepteren. Een vak van één regel met het label "Bericht" leest als een kort antwoord. Een hoger vak zegt "geef me meer". Formaat doet ertoe.
Keuzelijsten en keuzerondjes
Elke keuzelijst heeft een label nodig. "Kies een optie" en "Ja/Nee" zonder context zijn nutteloos. Een schermlezergebruiker heeft geen idee welke vraag je stelt. Maak het label van de keuzelijst duidelijk over welke keuze het gaat.
Keuzerondjes horen in een fieldset met een legend. De legend stelt de vraag. De opties beantwoorden die. "Wat beschrijft jouw gebruik het best?" met opties als "E-commerce," "Media," "SaaS." Een schermlezer leest de legend voor en dan elke optie. De gebruiker begrijpt dat hij uit een groep kiest en waar die groep voor dient.
Selectievakjes
Het label van een selectievakje moet natuurlijk lezen. "Ik ga akkoord met de gebruiksvoorwaarden" als label, met het selectievakje ernaast. Geen kaal selectievakje zonder tekst, waarbij gebruikers moeten raden wat het doet.
Is er aanvullende informatie, zoals een link naar de volledige voorwaarden, zet die dan direct naast het selectievakje. Verberg het niet. Gebruikers moeten weten waarmee ze akkoord gaan voordat ze het vakje aanvinken.
Groepen selectievakjes werken als groepen keuzerondjes. Een legend geeft de groep een naam en elke optie krijgt een eigen label.
Knoppen
De tekst op een knop moet zeggen wat er gebeurt. "Versturen." "Verzenden." "OK" werkt voor bevestigingen. "Go" niet. Geen algemene labels.
Heb je meerdere knoppen, maak ze dan onderscheidend. "Annuleren" en "Versturen" zijn duidelijk. Twee knoppen die allebei "Volgende" zeggen niet: een schermlezergebruiker hoort "volgende knop, volgende knop" en weet niet welke welke is.
Waar formulieren op je site staan
Contactformulieren in pop-ups. Aanmeldingen voor de nieuwsbrief in voetteksten. Donatieformulieren op pagina's over je missie. Enquêteformulieren bij het afrekenen. Elk formulier, overal, moet toegankelijk zijn.
Pop-upformulieren veroorzaken een focusval als je het niet beheert. Als een modaal venster opent, springt de focus erin. Sluit het, dan springt de focus terug naar de knop die het opende. Zonder dit raken toetsenbordgebruikers vast in het tabben door de achtergrondpagina.
Voeg bij lange pagina's met formulieren verderop een skiplink toe. Toetsenbordgebruikers moeten niet door 50 navigatie-items hoeven te tabben om bij je formulier te komen.
Veelgemaakte fouten
Vertrouwen op plaatshoudertekst in plaats van labels
Een plaatshouder met "Vul je e-mailadres in" verdwijnt zodra iemand begint te typen. Nu heeft de gebruiker geen idee waar het veld voor was. Schermlezers zien het helemaal nooit.
Gebruik een echt label. Wil je een plaatshouder voor tips over het formaat, prima. Maar gebruik het nooit als het label zelf.
Alleen kleur gebruiken voor verplichte velden
Een rood sterretje is onzichtbaar voor kleurenblinde gebruikers. Een pictogram is onzichtbaar voor schermlezers. Gebruik het woord "verplicht" in tekst. Tekst begrijpt iedereen.
Handmatig testen overslaan
De juiste HTML-structuur op papier betekent niet dat je formulier in de praktijk werkt. Labels staan misschien te ver van invoervelden. Focusranden zijn misschien onzichtbaar. Foutmeldingen worden misschien wel voorgelezen, maar verplaatsen de focus niet naar het veld.
Test met een toetsenbord. Test met een schermlezer. NVDA is gratis. JAWS is de standaard. VoiceOver als je op iOS test. Geautomatiseerde controles vangen de duidelijke problemen. Echt testen vangt de rest.
Tijdslimieten toevoegen
Een gebruiker met een tremor typt langzaam. Een schermlezergebruiker heeft tijd nodig om alle labels en instructies te beluisteren. Een limiet van 5 minuten laat gebruikers die er 10 nodig hebben vastlopen.
Haal tijdslimieten weg als je kunt. Moet je er toch een hebben, laat gebruikers de tijd dan twee keer verlengen voordat de sessie eindigt.
Zo bouwt WEMASY toegankelijke formulieren
WEMASY-formulieren zijn vanaf het begin toegankelijk gebouwd, niet als bijzaak. Elk sjabloon bevat goede labels. De focus wordt automatisch beheerd. Fouten worden aan schermlezers voorgelezen. Het kleurcontrast voldoet standaard aan WCAG 2.1 AA.
Pas aan zonder de toegankelijkheid te breken. Voeg velden toe, wijzig labels, schik de indeling anders. De onderliggende structuur blijft toegankelijk. Ingebouwde validatie laat fouten voorlezen door schermlezers.
Lees meer in onze complete gids over formulieren, of bekijk wat er in elk WEMASY-abonnement zit.