Digitale formulieren en toegankelijkheid

Iedereen vult weleens een formulier in. Vroeger deed je dat op papier, nu vooral online. Digitale formulieren helpen je om contact te maken met een website, bijvoorbeeld bij het aanvragen van informatie of het bestellen van een product. 

Toch is dat niet voor iedereen even makkelijk. Mensen met een beperking hebben vaak moeite met het invullen van formulieren. Daarom is het belangrijk dat organisaties hun formulieren aanpassen volgens de regels van digitale toegankelijkheid 2025.

Als je werkt aan een website of een training digitale toegankelijkheid, leer je hoe je formulieren maakt die iedereen kan gebruiken. Denk aan het juist labelen van invoervelden, het toevoegen van duidelijke knoppen en het vermijden van obstakels voor schermlezers. Zo zorg je dat jouw website voldoet aan de WCAG-richtlijnen en dat iedereen, met of zonder beperking, online zijn weg vindt.

In het kort

• Digitale formulieren moeten voor iedereen toegankelijk zijn

• Duidelijke en goed gelabelde velden helpen gebruikers sneller invullen

• Training in digitale toegankelijkheid versterkt jouw kennis en toepassing

Labeling van formulier­velden

Een formulier is pas echt toegankelijk als elk veld duidelijk is gelabeld. Jij helpt gebruikers, ook mensen die ondersteunende technologie gebruiken, door elk invoerveld te voorzien van een duidelijke en gekoppelde beschrijving. Zonder correcte labels kunnen schermlezers geen verbinding maken met het juiste veld. Dat veroorzaakt verwarring en fouten bij het invullen.

De digitale toegankelijkheid van websites hangt sterk samen met de WCAG-richtlijnen. Deze Web Content Accessibility Guidelines (WCAG) beschrijven hoe je formulieren maakt die iedereen kan gebruiken. De nieuwste WCAG 2.2 en de aankomende WCAG-richtlijnen 2025 leggen nadruk op correcte labelstructuren, contrast en leesbaarheid.

Het label-element in HTML gebruik je voor invoervelden, keuzelijsten, radiobuttons en selectievakjes. Dit label moet verbonden zijn met het juiste veld via het for-attribuut en de bijbehorende id. Zo weet een schermlezer welk veld bij welke beschrijving hoort.

Voor knoppen gebruik je vaak aria-attributen. Deze zijn niet zichtbaar op het scherm, maar wel herkenbaar voor ondersteunende technologie. Met aria-label geef je een knop of veld een naam die alleen hoorbaar is voor de gebruiker van een schermlezer. Met aria-labelledby kun je één label koppelen aan meerdere velden.

Een goed label zorgt ervoor dat een gebruiker meteen begrijpt wat hij moet invullen. Dat maakt het formulier sneller te gebruiken en vermindert fouten.

Een- en meerregelige invoervelden

Invoervelden gebruik je om tekst te verzamelen. Ze kunnen een- of meerregelig zijn. Eenregelige velden gebruik je voor korte antwoorden, zoals naam, e-mailadres of postcode. Meerregelige velden gebruik je voor langere teksten, zoals een bericht of toelichting.

Gebruik in HTML het input-element voor eenregelige velden en het textarea-element voor meerregelige velden. Beide hebben een label nodig dat via for en id is verbonden.

Voorbeeld van correcte koppeling:

<label for="voornaam">Je voornaam:</label>

<input type="text" name="voornaam" id="voornaam" />

<br />

<label for="bericht">Je bericht:</label>

<textarea name="bericht" id="bericht"></textarea>

In dit voorbeeld staat het label vóór het invoerveld. Dat maakt het duidelijk en logisch voor iedereen. Het for-attribuut in het label en het id in het invoerveld moeten identiek zijn. Anders werkt de koppeling niet.

Een label hoort altijd zichtbaar te zijn, tenzij het alleen bedoeld is voor schermlezers. In dat geval gebruik je een aria-attribuut. Bijvoorbeeld:

<input type="text" aria-label="Telefoonnummer" />

Deze methode is handig als je een minimalistisch design wilt behouden, maar toch wilt voldoen aan de WCAG-richtlijnen voor formulieren.

Belangrijke aandachtspunten

• Gebruik duidelijke en korte teksten in labels.

• Zet labels altijd dichtbij het veld dat ze beschrijven.

• Test je formulier met een schermlezer om te controleren of alles goed wordt voorgelezen.

• Controleer het kleurcontrast tussen tekst en achtergrond met een WCAG contrast checker.

Veelvoorkomende fouten

Fout

Gevolg

Oplossing

Geen for-attribuut

Schermlezer leest label niet

Voeg for en id toe

Label staat te ver van veld

Gebruiker ziet niet wat bij elkaar hoort

Plaats label direct boven of naast veld

Alleen placeholder-tekst

Tekst verdwijnt bij invoer

Gebruik altijd een zichtbaar label

Ongeldige HTML

Formulier werkt niet in sommige browsers

Controleer code met validator

Toegankelijke formulieren zijn niet alleen verplicht volgens de WCAG-richtlijnen overheid, maar verbeteren ook de gebruikservaring van iedereen. Een goed ontworpen labelstructuur helpt mensen sneller en foutloos te navigeren.

Wil je zeker weten dat jouw formulier voldoet aan de WCAG? Maak gebruik van een van onze diensten of volg een training digitaal toegankelijke formulieren.

Een WCAG-proof formulier maakt jouw website gebruiksvriendelijker, professioneler en toekomstbestendig. Je orgt er zo voor dat iedereen, met of zonder beperking, de informatie kan invullen en versturen. Dat is waar digitale toegankelijkheid om draait.

Algemene aanwijzingen

Toetsenbord bedienbaarheid

Zorg dat gebruikers formulieren volledig met het toetsenbord kunnen bedienen. Dit is verplicht volgens de WCAG-wetgeving 2025 en de Wet digitale toegankelijkheid. Mensen die geen muis gebruiken, moeten elk veld, elke knop en elk selectievakje kunnen bereiken met toetsen zoals Tab, Enter of pijltjestoetsen.

Gebruik label-elementen en ARIA-attributen om de relatie tussen velden en beschrijvingen duidelijk te maken. Voeg waar mogelijk toetscombinaties toe met het accesskey-attribuut. Zo kan iemand bijvoorbeeld met Alt + N direct naar een naamveld springen. Let wel op dat deze toets niet al een andere functie in de browser heeft.

Een overzichtelijke tabel helpt ontwikkelaars bij het testen van toetsenbordbediening:

Functie

Toets

Verwachte actie

Volgende veld

Tab

Cursor gaat naar volgend invoerveld

Vorig veld

Shift + Tab

Cursor gaat terug

Verzenden

Enter

Formulier wordt verzonden

Annuleren

Esc

Formulier sluit of reset

Toetsenbord bedienbaarheid is niet alleen een technische eis, maar ook een belangrijk onderdeel van digitale toegankelijkheid van de overheid en de European Accessibility Act (EAA).

Beperking tot het minimum

Vraag in formulieren alleen de gegevens die echt nodig zijn. Dit voorkomt verwarring en maakt het formulier overzichtelijker. De richtlijnen voor digitale formulieren adviseren om alleen verplichte informatie te tonen.

Laat velden verdwijnen of verschijnen afhankelijk van eerdere keuzes. Als iemand bijvoorbeeld aangeeft geen kinderen te hebben, hoeft het formulier geen leeftijdsvelden voor kinderen te tonen. Zo beperk je afleiding en houd je de interactie eenvoudig.

Een korte checklist helpt bij het bepalen van noodzakelijke velden:

• Vraag geen gegevens die je al hebt.

• Toon optionele velden pas als ze relevant zijn.

• Gebruik logische groepen om verwarring te voorkomen.

• Vermijd dubbele invoer.

Deze aanpak sluit aan bij het Besluit digitale toegankelijkheid overheid, dat eenvoud en duidelijkheid verplicht stelt voor alle digitale diensten.

Hulp en foutmeldingen

Goede hulpteksten en foutmeldingen voorkomen frustratie. Voeg tooltips of een helpknop toe waar gebruikers extra uitleg kunnen krijgen. Je kunt ook linken naar een aparte hulppagina, zoals bij digitaal toegankelijke instructies bij webformulieren.

Foutmeldingen moeten duidelijk beschrijven wat misging en hoe iemand het kan oplossen. Gebruik eenvoudige taal. Schrijf bijvoorbeeld:

“Het ingevoerde wachtwoord klopt niet. Typ het juiste wachtwoord.”

Vermijd vage meldingen zoals “Er is een fout opgetreden”.

Er zijn verschillende soorten fouten:

• Formaatfouten: verkeerde tekens of structuur, zoals letters in plaats van cijfers.

• Waarde-fouten: het formaat klopt, maar de waarde is ongeldig, bijvoorbeeld “34 maart”.

• Verplichte velden: gebruikers slaan een verplicht veld over.

Gebruik visuele signalen en tekst om fouten aan te duiden. Een rode rand alleen is niet genoeg; vermeld ook tekstueel wat er ontbreekt.

Verplichte velden

Geef duidelijk aan welke velden verplicht zijn. Zet bij het veld een sterretje (*) en leg bovenaan het formulier uit wat dat betekent. Gebruik daarnaast het required-attribuut of aria-required="true" zodat screenreaders het herkennen.

Een voorbeeldstructuur:

<label for="email">E-mailadres *</label>

<input id="email" name="email" type="email" required>

Kleurgebruik kan helpen, maar houd rekening met contrast. Volgens de WCAG verplicht is een minimumcontrast van 4,5:1 nodig.

Een korte lijst met tips:

• Vermeld bovenaan: “Velden met * zijn verplicht.”

• Gebruik niet alleen kleur om verplichting aan te geven.

• Test met screenreaders om te controleren of de melding hoorbaar is.

Deze werkwijze voldoet aan de eisen van de wetgeving digitale toegankelijkheid en de European Accessibility Act 2025.

Placeholders

Gebruik placeholder om te tonen wat iemand in een veld moet invullen. Een placeholder geeft een voorbeeld, zoals “bijv. naam@domein.nl”. De tekst verdwijnt zodra iemand begint te typen.

Gebruik het attribuut placeholder in HTML:

<input type="email" placeholder="bijv. naam@domein.nl">

Toch is een placeholder geen vervanging voor een label. Screenreaders lezen placeholders niet altijd goed voor. Daarom moet elk veld ook een duidelijk label hebben.

Een paar richtlijnen:

• Gebruik korte en beschrijvende tekst.

• Houd de contrastverhouding minimaal 4,5:1.

• Laat de placeholder niet te veel op de invoer lijken.

Dit helpt gebruikers om beter te begrijpen wat ze moeten invullen zonder dat het formulier rommelig oogt.

Invoer opslaan

Laat gebruikers hun invoer opslaan. Dit voorkomt dat ze alles opnieuw moeten invullen bij een fout of onderbreking. Voeg een knop toe met “Opslaan” of “Later verdergaan”.

Bij langere formulieren is dit belangrijk. Wanneer iemand halverwege stopt, kan hij later verder zonder gegevens te verliezen. Dit past binnen de principes van digitale toegankelijkheid overheid, omdat het stress en herhaling voorkomt.

Een voorbeeld van een eenvoudige opslag optie:

<button type="button">Opslaan</button>

Je kunt de invoer lokaal opslaan in de browser of op de server. Zorg dat de privacyregels worden nageleefd.

Voordelen van opslaan:

• Minder kans op afhaken.

• Hogere voltooiingsgraad.

• Betere gebruikerservaring.

De richtlijnen voor inclusief ontwerp van digitale formulieren benadrukken dat deze functie vooral belangrijk is voor mensen met cognitieve beperkingen of beperkte tijd.

Authenticatie en tijdlimiet

Authenticatie is nodig voor veiligheid, maar mag geen barrière vormen. Veel inlogformulieren hebben een tijdslimiet van 30 of 60 seconden. Dit is te kort voor mensen die hulpmiddelen gebruiken. Zorg dat de tijd verlengd kan worden of helemaal ontbreekt.

De Wet digitale toegankelijkheid 2025 en de European Accessibility Act (EAA) verplichten dat digitale diensten toegankelijk blijven, ook bij authenticatie. Dit betekent dat je gebruikers voldoende tijd moet geven om in te loggen en hun gegevens te controleren.

Een ander obstakel zijn CAPTCHAs. Deze visuele tests zijn vaak niet toegankelijk voor blinde of slechtziende mensen. Bied daarom een audioversie of een alternatieve verificatiemethode aan.

Een overzicht van toegankelijke alternatieven:

Type verificatie

Beschrijving

Toegankelijkheid

Audio CAPTCHA

Spreekt woorden uit die de gebruiker invoert

Geschikt voor slechtzienden

Log-in via e-mail

Gebruiker klikt op link in e-mail

Toegankelijk voor iedereen

SMS-code

Code ontvangen via telefoon

Toegankelijk mits tijd niet beperkt is

Zorg dat authenticatie processen voldoen aan de regels voor digitale toegankelijkheid van producten en diensten.

Een paar praktische tips:

• Vermijd korte tijdslimieten.

• Gebruik toegankelijke alternatieven voor CAPTCHA.

• Geef duidelijke foutmeldingen bij mislukte logins.

• Test met gebruikers met verschillende beperkingen.

Door deze richtlijnen te volgen, voldoe je aan de wetgeving digitale toegankelijkheid en maak je formulieren bruikbaar voor iedereen. Dit versterkt niet alleen de gebruikerservaring, maar ook de naleving van de WCAG-wetgeving 2025 en de European Accessibility Act 2025.

Digitale toegankelijkheid is geen extra optie meer, maar een wettelijke verplichting en een teken van goed ontwerp. Door formulieren te bouwen die iedereen kan gebruiken, toon je dat jouw organisatie verantwoordelijkheid neemt voor een inclusieve digitale samenleving.

Meest gestelde vragen

Hoe zorg ik ervoor dat mijn digitale formulieren voldoen aan de WCAG-richtlijnen?

Je zorgt dat je formulieren voldoen aan de WCAG-richtlijnen door duidelijke labels, foutmeldingen en toetsenbordnavigatie toe te voegen. De richtlijnen van de WCAG voor webformulieren helpen je stap voor stap om elk invoerveld begrijpelijk en bruikbaar te maken.

Gebruik contrastrijke kleuren, beschrijvende veldnamen en logische tabvolgorde. Zo kunnen gebruikers met en zonder beperking je formulier correct invullen.

Welke aanpassingen zijn noodzakelijk om digitale formulieren toegankelijk te maken voor visueel beperkten?

Voeg alternatieve tekst toe aan iconen en afbeeldingen. Gebruik labels die gekoppeld zijn aan invoervelden, zodat schermlezers ze kunnen voorlezen.

Vermijd plaatsaanduidingen als enige uitleg; ze verdwijnen zodra iemand begint te typen.

Wat zijn de wettelijke vereisten voor de toegankelijkheid van online formulieren?

Overheidsinstanties moeten voldoen aan de WCAG 2.1-normen, zoals vastgelegd in het Besluit digitale toegankelijkheid overheid. Deze regels gelden ook voor organisaties die publieke diensten aanbieden.

De site DigiToegankelijk legt uit hoe organisaties aan deze verplichtingen voldoen en hoe ze hun websites en apps toegankelijk maken.

Hoe test ik de toegankelijkheid van mijn digitale formulieren?

Test je formulieren met screenreaders zoals NVDA of VoiceOver en controleer of alle velden worden voorgelezen. Gebruik toetsenbordnavigatie om te zien of je zonder muis alles kunt invullen.

Je kunt ook mensen met verschillende beperkingen laten testen om echte gebruikservaringen te verzamelen. Op Digitale Overheid vind je voorbeelden van organisaties die dit al doen.

Op welke manieren kan ik de gebruiksvriendelijkheid van digitale formulieren verbeteren voor mensen met een beperking?

Gebruik duidelijke taal en korte zinnen. Vermijd vaktermen. Geef bij elk veld een korte uitleg of voorbeeld.

De tips van iBestuur laten zien hoe je formulieren eenvoudig en gebruiksvriendelijk maakt. Een goed formulier vraagt alleen de informatie die echt nodig is.

Welke tools kan ik gebruiken om de toegankelijkheid van mijn digitale formulieren te waarborgen?

Gebruik tools zoals WAVE, axe DevTools of Accessibility Insights om fouten te vinden. Deze tools controleren contrast, structuur en ARIA-labels.