Kan een vibecoded website voldoen aan de WCAG-richtlijnen?

Een AI-gegenereerde website kan in principe voldoen aan de WCAG-richtlijnen, maar dat gebeurt niet vanzelf. Vibecoding levert visueel aantrekkelijke code op, maar mist vrijwel altijd cruciale toegankelijkheidseisen zoals semantische HTML, alt-teksten en toetsenbordnavigatie. Zonder bewuste sturing en menselijke review voldoet een vibecoded site zelden aan de wettelijk vereiste WCAG 2.1 AA-standaard. Hieronder beantwoorden we de belangrijkste vragen over webtoegankelijkheid en vibecoding.

Wat zijn de WCAG-richtlijnen en welke eisen stellen ze aan websites? #

De WCAG (Web Content Accessibility Guidelines) zijn de internationale standaard voor webtoegankelijkheid, ontwikkeld door het W3C. Ze beschrijven hoe websites toegankelijk worden voor mensen met een beperking. De richtlijnen zijn opgebouwd rond vier kernprincipes:

• Waarneembaar (Perceivable), content moet op meerdere manieren waarneembaar zijn, bijvoorbeeld via alt-teksten bij afbeeldingen.
• Bedienbaar (Operable), alle functionaliteit moet bedienbaar zijn met toetsenbord en andere invoermethoden.
• Begrijpelijk (Understandable), tekst en bediening moeten voorspelbaar en leesbaar zijn.
• Robuust (Robust), content moet correct werken met verschillende browsers en hulptechnologieën.

Er zijn drie conformiteitsniveaus: A (minimum), AA (gangbare standaard) en AAA (hoogste niveau). In Nederland schrijft de Wet digitale overheid WCAG 2.1 Level AA voor als wettelijke eis voor overheidswebsites. Ook de European Accessibility Act (EAA), die in 2025 van kracht werd, maakt AA het praktische ijkpunt voor de meeste organisaties.

Hoe werkt vibecoding en wat genereert het precies? #

Bij vibecoding websites bouwen met AI beschrijf je in gewone taal wat je wilt bouwen, waarna een AI-tool de bijbehorende HTML, CSS en JavaScript genereert. Je test het resultaat, geeft feedback, en de AI verfijnt de code. Dit iteratieve proces herhaalt zich totdat het resultaat visueel klopt.

Het wezenlijke verschil met traditioneel programmeren: vibecoders accepteren de gegenereerde code vaak zonder deze volledig te reviewen. De AI optimaliseert primair voor visuele output en snelheid. Wat daarbij structureel achterblijft, is semantische HTML-structuur, ARIA-attributen, toetsenbordnavigatie en focusbeheer, precies de elementen die essentieel zijn voor WCAG-compliance. Een pagina kan er perfect uitzien en toch volledig ontoegankelijk zijn.

Welke WCAG-fouten komen het vaakst voor in vibecoded websites? #

De meest voorkomende toegankelijkheidsproblemen bij vibecoded websites zijn direct terug te leiden naar wat AI-modellen systematisch weglaten. Omdat trainingsdata overwegend ontoegankelijke code bevatten, reproduceert vibecoding steeds dezelfde fouten:

• Onvoldoende kleurcontrast, tekst en achtergrond halen de minimumverhouding niet (WCAG 1.4.3).
• Ontbrekende alt-tekst bij afbeeldingen, afbeeldingen zijn niet beschreven voor schermlezers (WCAG 1.1.1).
• Lege links, klikbare elementen zonder beschrijvende tekst (WCAG 2.4.4).
• Lege knoppen, interactieve elementen zonder label (WCAG 4.1.2).
• Ontbrekende formulierlabels, invoervelden zonder gekoppeld label (WCAG 1.3.1).
• Geen documenttaal ingesteld, de HTML mist een lang-attribuut (WCAG 3.1.1).

Kan een AI-tool zelf WCAG-compliant code genereren? #

Op dit moment kan geen enkele AI-tool betrouwbaar WCAG-compliant code genereren zonder menselijke tussenkomst. De trainingsdata bevatten overwegend ontoegankelijke code, waardoor de output dezelfde fouten overneemt. Bovendien vereisen veel succescriteria menselijk oordeel over context, contentstructuur en gebruikerservaring.

Wat wél werkt: bewust sturen via gedetailleerde prompts. Door vooraf niet-functionele eisen te specificeren, bijvoorbeeld “Zorg voor WCAG 2.1 AA-compliance, juiste ARIA-attributen en toetsenbordnavigatie”, verbetert de output aanzienlijk. Maar zelfs dan blijft validatie na generatie noodzakelijk. AI is een krachtversterker voor toegankelijkheid, geen vervanging voor bewust ontwerp en menselijk toezicht.

Hoe test je of een vibecoded website WCAG-compliant is? #

Een betrouwbare test van een AI-gegenereerde website volgt een gelaagde aanpak:

1. Geautomatiseerde scans, tools als Axe, WAVE en Lighthouse detecteren technische fouten zoals ontbrekende alt-tekst en contrastproblemen.
2. Handmatige toetsenbordnavigatie, controleer of elk interactief element bereikbaar en bedienbaar is zonder muis.
3. Schermlezertest, verifieer dat de pagina logisch wordt voorgelezen en alle elementen correct worden aangekondigd.
4. Contrastvalidatie, controleer kleurcombinaties met specifieke contrastcheckers.

Belangrijk: geautomatiseerde tools vangen slechts 30 tot 40 procent van alle toegankelijkheidsproblemen op. Contextafhankelijke criteria, zoals of een alternatieve tekst daadwerkelijk beschrijvend is, vereisen altijd menselijke beoordeling.

Wat moet je aanpassen om een vibecoded site toegankelijk te maken? #

De meest impactvolle aanpassingen richten zich op de hardnekkigste foutcategorieën. Voeg semantische HTML-elementen toe: gebruik correcte headings (h1 tot h6) in logische volgorde en landmarks als nav, main en footer. Schrijf beschrijvende alt-teksten bij elke afbeelding. Verhoog kleurcontrasten tot minimaal de WCAG AA-ratio. Voorzie alle knoppen en formuliervelden van duidelijke, gekoppelde labels. Voeg zichtbare focusstijlen toe en stel de documenttaal in.

Voor de aanpak heb je twee opties: prompt-iteratie of post-generatie code-editing. Eenvoudige fixes zoals documenttaal en alt-teksten kun je via verbeterde prompts afdwingen. Complexere aanpassingen aan heading-hiërarchie, focusbeheer en ARIA-attributen pak je effectiever aan door de gegenereerde code handmatig te bewerken. De meest kosteneffectieve strategie is om toegankelijkheid vanaf het eerste prompt in te bouwen in plaats van achteraf te repareren.

Wanneer is een vibecoded website geschikt voor professioneel gebruik? #

Vibecoding is geschikt voor interne tools, prototypes en mockups waar het juridische risico laag is en de gebruikersgroep beperkt. Voor publieke websites, overheidsomgevingen of sectoren met wettelijke toegankelijkheidseisen is vibecoded output pas productierijp na grondige menselijke review en een volledige toegankelijkheidsaudit.

De verantwoordelijkheid ligt altijd bij de organisatie die de website publiceert, niet bij de AI-tool. Daarom is het essentieel om vibecoded output te integreren in een beheerde infrastructuur met governance en compliance-waarborgen. Wanneer je organisatie werkt met het Microsoft Power Platform en je grip wilt houden op wat er gebouwd en gedeeld wordt, kan onze Compliance & Security Scan helpen om risico’s en compliancegaten in kaart te brengen. Wil je weten hoe jouw digitale omgeving ervoor staat? Neem dan contact met ons op voor een vrijblijvend gesprek.