Toegankelijke formulieren: wat UX-design en AI gemeen hebben
Formulieren zijn het stiefkind van elke website
Ik doe nu al meer dan twintig jaar website-audits. En als er één ding is dat consistent slecht is, over alle sectoren heen, dan zijn het formulieren.
Prachtige hero-sectie. Zorgvuldig opgebouwde blogposts. Net gestructureerde navigatie. En dan? Een contactformulier met drie unlabeled `` elementen en een knop die "Verzenden" heet.
Elke keer weer.
Het is alsof je een vogelhuisje bouwt met een perfect dak en muren, maar vergeet er een opening in te maken. Ziet er geweldig uit. Functioneert niet.
Dat is een probleem op drie niveaus tegelijk: voor gebruikers met een visuele beperking die een screen reader gebruiken, voor zoekmachines die pagina-structuur beoordelen, en voor AI-modellen die proberen te begrijpen wat je pagina vraagt en aanbiedt.
Het goede nieuws? Het oplossen is geen raketwetenschap. Het is discipline. En de juiste HTML-kennis.
De basis die nooit mag ontbreken
Een toegankelijk formulier is geen speciaal formulier. Het is gewoon een correct gebouwd formulier. Punt. Dit zijn de elementen die er altijd in moeten zitten:
- Elke ``, `
- Gebruik `
- Foutmeldingen zijn gekoppeld aan het specifieke veld via `aria-describedby`. Niet alleen visueel zichtbaar, ook programmatisch.
- Verplichte velden zijn gemarkeerd met `required` en `aria-required="true"`. Niet alleen met een sterretje in de labeltekst.
- De tab-volgorde volgt een logische leesvolgorde: boven naar beneden, links naar rechts.
Bij een Kobalt-klant in de gezondheidszorg hadden negen van de tien formuliervelden geen gekoppeld label. Een screen reader kondigde alles aan als "bewerken, leeg." Volledig nutteloos voor iemand die blind is. Na correctie: alle velden gelabeld, Lighthouse Accessibility-score van 54 naar 91. In een middag.
Wat AI-modellen zien als ze je formulier lezen
Maar wacht. Waarom zouden AI-crawlers iets geven om je formulier? Goede vraag. Ik moest er zelf ook even over nadenken.
AI-crawlers lezen formulieren anders dan mensen. Maar ze lezen ze wel. En wat ze eruit halen:
- De `
- De `
- De knop-tekst maakt verschil. "Vraag een gesprek aan" communiceert iets heel anders dan "Verzenden."
- Het `action`-attribuut en de HTTP-method (GET vs POST) zijn technische signalen over hoe het formulier werkt.
- Autocomplete-attributen zoals `autocomplete="email"` geven extra semantische context.
Al deze signalen samen helpen AI-modellen om te begrijpen wat de pagina doet. Een goed contactformulier op een consultancypagina communiceert: "Hier kun je een gesprek aanvragen met een expert." Een slecht formulier communiceert: niks.
En dat verschil? Dat telt.
Concrete verbeteringen die je nu kunt doorvoeren
Genoeg theorie. Hier is je checklist, geordend van makkelijk naar moeilijker:
- Controleer of elk inputveld een `
- Vervang placeholder-tekst als enige aanduiding door een echte `
- Groepeer gerelateerde velden in een `
- Schrijf betekenisvolle knop-teksten. "Verstuur aanvraag" of "Plan een gesprek" vertelt veel meer dan "Submit."
- Voeg `autocomplete`-attributen toe aan velden die persoonlijke informatie vragen: naam, e-mail, telefoon, adres.
- Test je formulier met een screen reader. VoiceOver op Mac, NVDA op Windows, of gebruik de Accessibility-tab in Chrome DevTools. Het duurt vijf minuten en het is een eye-opener.
Gebruik nooit `aria-label` als vervanging voor een zichtbare `
Wil je weten hoe je formulieren (en de rest van je site) scoren voor AI? Draai onze gratis AEO — bibliotheekterm-scan op aeo-expert.nl, of neem contact op met Kobalt voor een volledige audit.
Een toegankelijk formulier is geen formulier met extra code. Het is een formulier dat correct is gebouwd. Voor mensen én voor machines. Wie dat onderscheid maakt, bouwt gewoon een slecht formulier.
Veelgestelde vragen
Heeft formulier-toegankelijkheid directe invloed op mijn AEO-score?
Ja, via twee wegen. Ten eerste verbetert het je Lighthouse Accessibility-score, die correleert met AEO-score (zoals ik in een eerder artikel heb laten zien). Ten tweede geven goed gelabelde formulieren AI-modellen extra context over je pagina-structuur en intentie. Formulieren zijn vaak de meest interactieve elementen op een pagina. Als die goed zijn opgebouwd, signaleert dat kwaliteit over de hele linie.
Wat is het verschil tussen aria-label en aria-labelledby?
`aria-label` voegt een onzichtbare tekst-label toe die alleen door assistieve technologie wordt gelezen. `aria-labelledby` verwijst naar een bestaand element op de pagina dat als label fungeert. De voorkeur gaat naar `aria-labelledby`, omdat het zichtbare tekst hergebruikt en zo de visuele en semantische context verbindt. Gebruik `aria-label` alleen als er echt geen zichtbaar alternatief is.
Moet elk formulier een form-element gebruiken?
Ja. Altijd. Een `
Hoe scoort jouw website op AI-gereedheid?
Krijg binnen 30 seconden je AEO-score en ontdek wat je kunt verbeteren.
