Een formulier is een klein gesprek. Jij vraagt iets, iemand anders antwoordt. Maar als die ander de vraag niet kan zien, niet bij de knop kan komen of niet snapt waarom zijn antwoord wordt geweigerd, is het gesprek voorbij voordat het begint. Er komt geen klacht. Diegene haakt gewoon af.
Dat gebeurt vaker dan je denkt, en niet alleen bij mensen met een beperking. Iemand met een schermlezer, iemand die alles met het toetsenbord doet, iemand met trillende handen, iemand die kleurenblind is, of gewoon iemand die je formulier met één hand op zijn telefoon invult in de felle zon: ze lopen allemaal tegen dezelfde drempels aan. Het goede nieuws is dat de meeste oplossingen klein zijn, en dat het formulier er voor iedereen prettiger van wordt.
Geef elk veld een zichtbaar label
Elk veld heeft een label nodig dat zegt wat je moet invullen, en dat label moet zichtbaar blijven terwijl iemand typt.
- Vertrouw niet op voorbeeldtekst in het veld. Grijze tekst in een veld verdwijnt zodra iemand begint te typen, dus je kunt niet meer terugzien waar het veld voor was. Vaak is het contrast ook nog eens laag. Zet een echt label boven het veld, en gebruik de voorbeeldtekst hooguit voor een voorbeeld.
- Koppel het label aan het veld. In de code hoort het label aan het veld vast te zitten, zodat een schermlezer "E-mailadres" voorleest als iemand erop terechtkomt. Mooie bijkomstigheid: klik je op het label, dan staat de cursor in het veld. Dat maakt het aanklikgebied groter.
- Groepeer vragen die bij elkaar horen. Een rij keuzerondjes of vinkjes heeft een groepslabel nodig met de vraag erin, zoals "Hoe wil je dat we contact opnemen?". Zonder dat label hoort iemand met een schermlezer alleen "E-mail, Telefoon, Post", zonder te weten wat er gevraagd wordt.
- Houd labels kort en duidelijk. Kies liever voor "Je e-mailadres" dan voor "Contactgegevens (primair)". Moet je meer uitleggen, zet dan een korte hint onder het label.
Zorg dat uitleg makkelijk te vinden is
Uitleg helpt alleen als mensen hem op tijd zien.
- Zet hints vóór het veld, niet erachter. Moet een wachtwoord een bepaalde lengte hebben of een datum een bepaald formaat, zeg dat dan tussen het label en het veld. Koppel de hint ook aan het veld, zodat schermlezers hem meenemen.
- Geef verplichte velden aan in woorden. Een sterretje alleen valt makkelijk weg en legt zichzelf niet uit. Schrijf "verplicht" of "(optioneel)", net wat je het minst vaak nodig hebt, en zeg bovenaan welke aanduiding je gebruikt.
- Stop belangrijke informatie niet in een tooltip. Iets wat alleen verschijnt als je er met de muis overheen gaat, is met een toetsenbord of op een touchscreen lastig te bereiken.
Laat het hele formulier werken met een toetsenbord
Veel mensen gebruiken nooit een muis: mensen die blind zijn, mensen die hun handen beperkt kunnen bewegen, en ook veel mensen die met het toetsenbord gewoon sneller zijn. Je formulier hoort volledig te werken met de Tab-toets, de pijltjestoetsen, de spatiebalk en Enter.
- Een logische volgorde. Met Tab ga je door de velden in de volgorde waarin je ze leest, van boven naar beneden.
- Altijd zichtbaar waar je bent. Mensen moeten zien welk veld actief is. Haal de focusrand nooit weg zonder er een duidelijk alternatief voor terug te zetten.
- Geen doodlopende wegen. Pop-ups, datumkiezers en zelfgebouwde keuzelijsten zijn de plekken waar mensen het vaakst vastlopen. Controleer of je ze met alleen het toetsenbord kunt openen, gebruiken en weer sluiten.
- Let op de focus als het scherm verandert. Toont je formulier één vraag tegelijk, of opent er een nieuwe stap, verplaats de focus dan naar de nieuwe vraag. Zo weet iemand met een schermlezer dat er iets veranderd is.
Schrijf foutmeldingen die helpen
Een foutmelding hoort te voelen als een vriendelijke hand op je schouder, niet als een rode stempel.
- Zeg wat iemand nu kan doen. "Dit e-mailadres lijkt niet compleet. Wil je het even checken?" helpt. "Ongeldige invoer" niet.
- Toon de melding bij het veld, en koppel hem eraan, zodat hij wordt voorgelezen als iemand teruggaat om het te verbeteren.
- Gebruik niet alleen kleur. Een rode rand zegt niets als je geen rood ziet. Voeg een icoontje toe en vooral woorden.
- Bewaar wat mensen hebben ingevuld. Niemand zou zijn antwoorden kwijt moeten raken door één foutje.
- Zet bij langere formulieren een kort overzicht bovenaan met links naar elk veld dat aandacht nodig heeft, en verplaats de focus daarheen na het versturen.
- Ga niet roepen terwijl iemand nog typt. Controleer een veld als iemand het verlaat of het formulier verstuurt, niet na elke toetsaanslag.
Let op contrast en kleur
Lichtgrijze tekst op een witte achtergrond oogt rustig, maar is voor veel mensen moeilijk te lezen, en op een telefoon in de zon voor bijna iedereen.
- Tekst heeft genoeg contrast met de achtergrond nodig. De veelgebruikte WCAG-richtlijnen vragen om een contrastverhouding van minstens 4,5 op 1 voor gewone tekst.
- Ook veldranden en knoppen tellen mee. Mensen moeten kunnen zien waar een veld begint en eindigt. WCAG vraagt minstens 3 op 1 voor de randen van onderdelen zoals velden en vinkjes.
- Controleer beide thema's. Heeft je formulier een donkere modus, kijk daar dan ook naar het contrast.
- Laat kleur nooit in zijn eentje de betekenis dragen: niet bij fouten, niet bij verplichte velden en niet bij de gekozen optie.
Laat ruimte om te tikken, te zoomen en automatisch aan te vullen
- Maak aanklikgebieden groot genoeg. Kleine vinkjes en piepkleine links vlak naast elkaar zijn lastig te raken met een vinger of een trillende hand. Klikbare labels helpen hier enorm.
- Laat mensen inzoomen. Blokkeer zoomen op mobiel niet, en controleer of het formulier nog werkt als de tekst groter is, zonder dat er stukken buiten beeld verdwijnen.
- Gebruik de juiste veldtypes en automatisch aanvullen. Een e-mailveld dat het e-mailtoetsenbord laat verschijnen en velden die de browser zelf kan invullen, schelen typewerk. Daar heeft iemand met beperkte handfunctie of een geheugen dat niet altijd meewerkt veel aan.
Geen haast en geen verrassingen
- Vermijd krappe tijdslimieten. Moet een sessie verlopen, waarschuw dan vooraf en laat mensen om extra tijd vragen.
- Verander niets zonder waarschuwing. Een optie kiezen hoort iemand niet ineens naar een andere pagina te sturen of het formulier te versturen.
- Wees voorzichtig met puzzels. Een CAPTCHA kan onmogelijk zijn voor mensen met een visuele of cognitieve beperking. Over vriendelijkere opties schreven we in Spam in je formulier voorkomen zonder je invullers te ergeren.
- Zeg wat er na het versturen gebeurt. Een duidelijke bedankmelding, die ook door schermlezers wordt voorgelezen, laat mensen weten dat hun antwoorden echt zijn aangekomen.
Test het zelf, in tien minuten
Je hoeft geen expert te zijn om de grootste problemen te vinden.
- Leg je muis weg en vul het hele formulier in met alleen het toetsenbord. Kun je overal bij, zie je waar je bent en kun je het versturen?
- Zoom in tot twee keer de normale grootte. Is alles nog leesbaar en bruikbaar?
- Maak expres een fout. Is duidelijk wat er misging en hoe je het oplost, ook zonder op kleur te letten?
- Probeer een schermlezer, zoals VoiceOver op een Mac of iPhone, of NVDA op Windows. Hoor je bij elk veld een duidelijke vraag?
- Laat er een automatische checker overheen gaan. Die vindt snel dingen als ontbrekende labels en te weinig contrast, maar kan niet alles beoordelen. De stappen hierboven blijven dus nodig.
En als het kan: vraag een paar mensen die dagelijks hulpmiddelen gebruiken om je formulier te proberen. Zij vinden dingen die geen checklist vindt.
Een snelle checklist
- Elk veld heeft een zichtbaar label dat blijft staan en aan het veld gekoppeld is.
- Opties die bij elkaar horen, staan gegroepeerd onder een duidelijke vraag.
- Hints staan vóór het veld; verplicht of optioneel staat er in woorden.
- Het hele formulier werkt met een toetsenbord, en je ziet altijd duidelijk waar je bent.
- Foutmeldingen zeggen wat er beter moet, staan bij het veld en leunen niet op kleur.
- Na een fout blijft staan wat iemand al had ingevuld.
- Tekst en veldranden hebben genoeg contrast, in elk thema.
- Het formulier werkt ingezoomd en op een klein scherm.
- Velden hebben het juiste type en ondersteunen automatisch aanvullen.
- Geen krappe tijdslimieten, geen onverwachte paginawissels, en aan het eind een duidelijke bevestiging.
Met deze stappen pak je de meest voorkomende problemen aan, maar het is geen volledige toegankelijkheidskeuring. Moet je formulier aan een wettelijke of contractuele norm voldoen, laat het dan goed controleren.
Zo kijken we hier bij Cuppaform naar
Cuppaform wordt nog gebouwd, en we willen dat toegankelijkheid gewoon bij het formulier hoort, niet als extraatje waar je zelf aan moet denken. De pagina's van deze website, inclusief de wachtlijst en het contactformulier, controleren we met een automatische toegankelijkheidstool, in de lichte en de donkere modus. Terwijl we de formulierbouwer maken, werken we aan goede standaardinstellingen: zichtbare labels, duidelijke foutmeldingen in gewone woorden en formulieren die met een toetsenbord werken.
Probeer de demo en ervaar hoe een vriendelijk formulier voelt vanaf de andere kant.