Toegankelijke formulieren: labels, foutmeldingen en knoppen die voor iedereen werken

In een formulier wordt een bezoeker een klant, een abonnee of een patiënt. Het is ook de plek waar veel websites stilletjes mensen verliezen. Een veld dat alleen zegt wat het wil tot je begint te typen, een fout die alleen als rode rand verschijnt, een puzzel die je niet opgelost krijgt: elk ervan kan iemand doen afhaken. In dit artikel lees je wat een formulier makkelijk maakt voor iedereen, ook voor mensen die een schermlezer gebruiken (software die het scherm voorleest), mensen die alleen het toetsenbord gebruiken en mensen voor wie lezen of onthouden moeilijk is. Je krijgt korte voorbeelden van code voor en na, voor je ontwikkelaar of je AI-bouwer, en checklists voor een contactformulier, een afrekenpagina en een registratieformulier.

Waarom formulieren zo vaak mislopen

Formulieren horen bij de grootste probleemzones op het web. In de WebAIM Million 2026, een automatische controle van een miljoen startpagina’s, had 51% van de pagina’s formuliervelden zonder label. En dat is alleen wat een machine op een startpagina kan vinden. Afrekenstappen en registratieformulieren, waar meer op het spel staat, bevatten vaak nog meer problemen.

De regels waarop de meeste Europese toegankelijkheidswetten steunen, zijn de WCAG, de Web Content Accessibility Guidelines van het W3C. Verschillende eisen daarin gaan over formulieren: velden hebben labels of instructies nodig, fouten moeten in tekst worden aangegeven en er moeten suggesties komen om ze op te lossen. De handleiding over formulieren van het W3C gaat er uitgebreid op in. Hieronder lees je de praktische versie.

Elk veld heeft een zichtbaar label

Een label is de tekst die zegt waarvoor een veld dient: "E-mailadres", "Postcode", "Bericht". Het hoort altijd zichtbaar te zijn, vlak bij het veld te staan en er in de code mee verbonden te zijn. Dan leest een schermlezer het label voor zodra iemand in het veld komt. Een verbonden label heeft een extra voordeel: klik je erop, dan staat de cursor in het veld. Kleine aankruisvakjes raak je zo veel makkelijker.

De vaakste fout is de placeholder (de grijze hulptekst in een veld) als enige label gebruiken. Die verdwijnt zodra je typt, waardoor je niet meer kunt nakijken wat er gevraagd werd. Hij is vaak te bleek om te lezen, en sommige schermlezers lezen hem niet voor. De Nielsen Norman Group zet die problemen op een rij in het artikel over waarom placeholders schaden.

<!-- Voor: de hulptekst verdwijnt bij het typen, en niets benoemt het veld -->
<input type="email" placeholder="E-mailadres" />

<!-- Na: een zichtbaar label, via for en id met het veld verbonden -->
<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" autocomplete="email" />

Wil je een voorbeeld van het verwachte formaat geven, zet het dan in een korte hulptekst onder het label ("Bijvoorbeeld: 9000 Gent"), niet alleen in de placeholder. Onze herstelgids over labels toont de oplossing stap voor stap.

Groepeer keuzes die bij elkaar horen

Keuzerondjes (ronde knoppen waarmee je één optie kiest) en groepen aankruisvakjes hebben twee soorten label nodig: één per optie en één voor de vraag als geheel. Zonder die vraag hoort iemand met een schermlezer misschien alleen "Ja, keuzerondje, 1 van 2", zonder te weten waarop hij ja zegt.

In code is de groep een fieldset en de vraag de legend ervan:

<!-- Voor: de vraag is gewone tekst, niet verbonden met de opties -->
<p>Hoe mogen we je contacteren?</p>
<input type="radio" id="c-mail" name="contact" /> <label for="c-mail">E-mail</label>
<input type="radio" id="c-tel" name="contact" /> <label for="c-tel">Telefoon</label>

<!-- Na: de opties zijn gegroepeerd en de vraag benoemt de groep -->
<fieldset>
  <legend>Hoe mogen we je contacteren?</legend>
  <input type="radio" id="c-mail" name="contact" /> <label for="c-mail">E-mail</label>
  <input type="radio" id="c-tel" name="contact" /> <label for="c-tel">Telefoon</label>
</fieldset>

Hetzelfde geldt voor een datum in aparte velden voor dag, maand en jaar, of voor een blok adresvelden.

Verplichte velden en instructies

Zeg vooraf welke velden mensen moeten invullen. Twee manieren werken goed:

• Zet "(verplicht)" in het label van elk verplicht veld. Dat is het duidelijkst.
• Of gebruik een sterretje (_) en leg het één keer bovenaan uit: "Velden met _ zijn verplicht."

Vertrouw niet alleen op kleur, zoals rode labels voor verplichte velden: wie kleuren slecht onderscheidt, ziet dat niet. Voeg in de code het attribuut required toe, zodat ook schermlezers "verplicht" melden.

Houd instructies kort en zet ze vóór het veld waarover ze gaan, niet na de verzendknop. Een wachtwoordregel als "Minstens 12 tekens" hoort onder het label van het wachtwoord, waar mensen hem zien voordat ze typen.

Vraag alleen wat je echt nodig hebt. Elk extra veld is een extra kans dat iemand afhaakt. En laat mensen binnen één proces niet twee keer hetzelfde typen: WCAG 2.2 voegde de eis Redundant Entry toe, die vraagt om eerder gegeven informatie automatisch in te vullen of ter keuze aan te bieden. Een vakje "Factuuradres is hetzelfde als leveradres" is het klassieke voorbeeld.

Foutmeldingen die helpen om iets op te lossen

Iedereen maakt fouten in formulieren. Het gaat erom hoe snel je ze kunt rechtzetten. Een goede foutmelding:

• Staat in tekst, niet alleen als rode rand of pictogram. Wie bepaalde kleuren niet uit elkaar houdt, mist een rode rand makkelijk, en schermlezers melden helemaal geen kleuren.
• Staat naast het veld waarover ze gaat, zodat mensen ze vinden, en is er in de code mee verbonden, zodat ze wordt voorgelezen als iemand naar het veld teruggaat.
• Zegt hoe je het oplost, niet alleen dat er iets mis is. "Vul een e-mailadres in zoals naam@voorbeeld.be" helpt; "Ongeldige invoer" niet.
• Bewaart wat mensen al typten. Een volledig leeg formulier na één fout is een reden om te vertrekken.

Voeg bij lange formulieren na het verzenden bovenaan een korte samenvatting toe met elke fout als link naar het veld, en zet de toetsenbordfocus (de plek waar je typt) op die samenvatting. Het GOV.UK Design System van de Britse overheid toont een goed geteste versie van dat patroon.

<!-- Voor: alleen een rode rand, niets wat een schermlezer kan melden -->
<input type="email" id="email" class="rode-rand" />

<!-- Na: een melding in tekst, verbonden met het veld -->
<label for="email">E-mailadres</label>
<p id="email-fout" class="fout">Vul een e-mailadres in zoals naam@voorbeeld.be</p>
<input
  type="email"
  id="email"
  name="email"
  autocomplete="email"
  aria-invalid="true"
  aria-describedby="email-fout"
/>

aria-describedby verbindt de melding met het veld, en aria-invalid laat hulptechnologie weten dat het veld aandacht nodig heeft.

Laat de browser het bekende werk doen

Browsers en wachtwoordbeheerders kunnen je naam, adres, e-mailadres en telefoonnummer automatisch invullen, als het formulier zegt wat elk veld is. Dat spaart iedereen typwerk, en het maakt een groot verschil voor mensen met een motorische beperking, geheugenproblemen of dyslexie. WCAG noemt dit Identify Input Purpose, het doel van invoer herkenbaar maken.

Het attribuut autocomplete doet het werk. Vaak gebruikte waarden:

• name, of given-name en family-name voor aparte velden voor voornaam en achternaam
• email en tel
• street-address, postal-code, address-level2 (de gemeente of woonplaats) en country-name
• organization voor een bedrijfsnaam
• new-password bij registratie en current-password bij aanmelden
• one-time-code voor een code die per sms komt

Gebruik ook het passende veldtype: type="email" en type="tel" tonen op een telefoon het juiste toetsenbord.

Knoppen, toetsenbord en beveiligingscontroles

Knoppen die zeggen wat ze doen

De verzendknop is een echte knop met een duidelijke tekst: "Bericht versturen", "Bestelling plaatsen", "Account aanmaken". Niet "Verzenden" zonder meer, en nooit een pijltje zonder naam. Toont een knop alleen een pictogram, dan heeft hij een verborgen naam nodig die een schermlezer kan voorlezen.

<!-- Voor: een klikbaar vak met een pictogram, zonder naam en zonder toetsenbordtoegang -->
<div class="verstuur" onclick="verstuur()"><svg>...</svg></div>

<!-- Na: een echte knop met een naam -->
<button type="submit">Bericht versturen</button>

Onze herstelgids over knopnamen behandelt ook knoppen met alleen een pictogram.

Alles werkt met het toetsenbord

Wie alleen het toetsenbord gebruikt, moet elk veld met Tab kunnen bereiken, opties met de pijltjestoetsen of de spatiebalk kunnen kiezen, eigen keuzelijsten kunnen openen en met Enter kunnen versturen. Let op datumkiezers, zelfgemaakte keuzelijsten en zones waar je een bestand naartoe sleept: die werken vaak alleen met een muis. Met onze toetsenbordtest van tien minuten controleer je dat zelf.

CAPTCHA’s en alternatieven

Een CAPTCHA is een test die moet bewijzen dat je geen robot bent: golvende letters overtypen of foto’s aanklikken. Voor veel mensen is dat een muur. Het W3C beschrijft de problemen in zijn nota over de ontoegankelijkheid van CAPTCHA. WCAG 2.2 voegde ook Accessible Authentication toe: aanmelden mag niet afhangen van iets onthouden of overtypen, tenzij er hulp is, zoals wachtwoordbeheerders en plakken toestaan.

Vriendelijkere manieren om spam tegen te houden zijn onzichtbare controles die op de achtergrond lopen, een verborgen veld dat alleen robots invullen, en een grens aan het aantal berichten per bezoeker. Moet je toch een zichtbare test gebruiken, bied dan meer dan één soort aan, zoals een audioversie naast een visuele. En blokkeer nooit het plakken in velden voor wachtwoorden of codes.

Tijdslimieten

Verloopt een formulier, dan kunnen mensen die traag lezen of typen hun werk kwijtraken. De WCAG-eis Timing Adjustable vraagt dat mensen een tijdslimiet kunnen uitschakelen of verlengen. Een gangbare manier is een waarschuwing voor de tijd om is, met minstens 20 seconden om met één eenvoudige handeling te verlengen. Ticketverkoop en veilingen kunnen uitzonderingen zijn.

Bevestiging

Toon na het verzenden een duidelijke melding op het scherm, en zorg dat schermlezers ze ook voorlezen, bijvoorbeeld door de focus ernaartoe te verplaatsen. Laat mensen bij bestellingen, boekingen en alles met juridische of financiële gevolgen hun antwoorden nakijken voor de laatste stap, en zeg wat er daarna gebeurt: "Bedankt. We stuurden een bevestiging naar naam@voorbeeld.be."

Checklists voor veelgebruikte formulieren

Contactformulier

1. Elk veld heeft een zichtbaar label dat blijft staan als je typt.
2. Verplichte velden zijn in tekst aangeduid, niet alleen met kleur.
3. Velden voor naam, e-mail en telefoon hebben de juiste autocomplete-waarde.
4. Fouten staan in tekst naast het veld en leggen uit wat je moet doen.
5. Op de knop staat "Bericht versturen" of iets gelijkaardigs.
6. Eventuele spambescherming werkt zonder visuele puzzel.
7. Na het verzenden verschijnt een bevestiging die ook wordt voorgelezen.

Afrekenen

1. De adresvelden gebruiken autocomplete, en "Hetzelfde als leveradres" bespaart overtypen.
2. Keuzes voor levering en betaling zijn gegroepeerd onder een duidelijke vraag.
3. Fouten in de kaart- of adresvelden worden in woorden uitgelegd.
4. Mensen kunnen de bestelling nakijken voordat ze betalen.
5. Op de laatste knop staat "Betalen" of "Bestelling plaatsen", niet "Volgende".
6. Een eventuele tijdslimiet kun je verlengen.
7. De bevestigingspagina zegt wat er besteld is en wat er nu gebeurt.

Registreren en aanmelden

1. Velden voor e-mail en wachtwoord hebben zichtbare labels en de juiste autocomplete-waarden.
2. Wachtwoordregels staan er vóór het typen.
3. Plakken en wachtwoordbeheerders werken.
4. Codes die per sms of e-mail komen, kun je plakken.
5. Een knop om het wachtwoord te tonen is een echte knop met een naam.
6. Foutmeldingen zeggen wat er mis is, zonder te verraden welke accounts bestaan.

Wat ibin wel en niet controleert in je formulieren

Een automatische controle vindt velden zonder label, knoppen zonder naam en tekst met te weinig contrast. ibin toont elk probleem met een uitvergrote afbeelding van de plek en een herstelgids, en de knop "Instructies voor een AI-tool kopiëren" geeft je een kant-en-klare prompt voor Lovable, Bolt, v0 en vergelijkbare tools. Automatische controles vinden wel maar ruwweg een derde tot de helft van alle toegankelijkheidsproblemen. Of een foutmelding helpt, of de stappen logisch zijn en of een CAPTCHA mensen tegenhoudt: daarvoor is een mens nodig. Vul je eigen formulier in met alleen het toetsenbord, maak bewust een fout en kijk wat er gebeurt.

Controleer je formulieren

Controleer je contactpagina of afrekenpagina gratis met ibin om ontbrekende labels en knoppen zonder naam te vinden. Loop daarna de checklists hierboven en de herstelgidsen door. Meld je je aan, dan kun je tot 200 pagina’s van dezelfde site laten controleren, en met wekelijkse controles hoor je het wanneer een aanpassing aan een formulier iets stukmaakt.

Kijk hoe je eigen site scoort

Controleer gratis een pagina, zonder account. Je krijgt een duidelijke lijst van wat je eerst oplost, met afbeeldingen van waar elk probleem zit.

Adres van de pagina

Controleer deze pagina

Bijvoorbeeld jouwwinkel.com. Eén pagina controleren duurt ongeveer 20 seconden en is gratis.