Hoe je toegankelijkheidseisen toepast op een vibecoded website

Een vibecoded website toegankelijk maken vereist bewuste aandacht, omdat AI-gegenereerde code standaard zelden voldoet aan de WCAG-richtlijnen. Vibecoding — het bouwen van websites door middel van AI-prompts zonder diepgaande technische kennis — levert vaak code op die er visueel goed uitziet, maar structureel tekortschiet op webtoegankelijkheid. In dit artikel lees je welke fouten het vaakst voorkomen, hoe je toegankelijkheidseisen websitebreed toepast, en welke wettelijke verplichtingen gelden voor digitale toegankelijkheid in Nederland.

Wat vibecoding betekent voor toegankelijkheid #

Vibecoding is een AI-aangedreven aanpak waarbij je in natuurlijke taal beschrijft wat je wilt bouwen, waarna een AI-model de code genereert. Die snelheid heeft een keerzijde: de gegenereerde code is vaak slordig, redundant en ontoegankelijk. Semantische HTML ontbreekt, labelstructuren kloppen niet en toetsenbordnavigatie werkt gebrekkig — stuk voor stuk schendingen van standaard WCAG-vereisten.

Het probleem is niet dat AI slechte code kán produceren — dat deden menselijke ontwikkelaars ook. Het probleem is de schaal en snelheid waarmee dat nu gebeurt. Veelvoorkomende patronen in vibecoded output, zoals het weglaten van semantische HTML, gebrekkige labelstructuren en kapot focusbeheer, leiden direct tot schendingen van WCAG-criteria op niveau A en AA.

De meest voorkomende toegankelijkheidsfouten in AI-gegenereerde code #

De fouten die het vaakst opduiken in een vibecoded website zijn: ontbrekende alt-teksten bij afbeeldingen, ongelabelde formuliervelden, onvoldoende kleurcontrast, kapotte toetsenbordnavigatie en ontbrekende skip-links. Daarnaast is ARIA-misbruik een terugkerend probleem — AI voegt regelmatig onnodige ARIA-landmarks toe die schermlezers juist verwarren.

In de praktijk ziet dit er bijvoorbeeld zo uit: een formulierveld krijgt een visueel label, maar het <label for>-attribuut verwijst naar een niet-bestaand ID. Voor ziende gebruikers lijkt alles in orde, maar een schermlezergebruiker hoort geen labelbeschrijving. Mensen met een visuele beperking, motorische beperking of cognitieve beperking ondervinden hier direct hinder van.

Toegankelijkheidseisen stap voor stap toepassen op vibecoded pagina’s #

De effectiefste aanpak voor een toegankelijke website maken met vibecoded pagina’s is een gelaagde methode die geautomatiseerde tools combineert met handmatige controles en prioritering op WCAG-niveau.

1. Geautomatiseerde baseline — Draai een audit met axe-core of Lighthouse. Dit vangt een deel van de WCAG-problemen op als startpunt.
2. Toetsenbordtest — Tab door de hele pagina en controleer of de focusvolgorde logisch is en alle interactieve elementen bereikbaar zijn.
3. Schermlezertest — Test met NVDA (Windows) of VoiceOver (Mac) of alle content correct wordt voorgelezen.
4. Prioriteer op WCAG-niveau — Los niveau-A-fouten als eerste op, daarna AA. Niveau AAA is wenselijk maar niet wettelijk verplicht.

Sommige aanpassingen kun je direct in de AI-prompt meenemen — zoals het afdwingen van semantische HTML en correcte koppenstructuur. Andere zaken, zoals het finetunen van focusbeheer en het testen van schermlezercompatibiliteit, vereisen altijd handmatige controle achteraf.

Hoe je AI-prompts schrijft met toegankelijkheid ingebouwd #

De sleutel tot betere vibecoded output is toegankelijkheidsinstructies expliciet opnemen in je prompts. In plaats van “Genereer een contactformulier” schrijf je: “Genereer een toegankelijk contactformulier met semantische HTML, programmatisch gekoppelde labels via for-attributen, een logische koppenstructuur, zichtbare focusindicatoren en kleurcontrast van minimaal 4,5:1.”

Deze aanpak werkt voor elk type component. Voor datavisualisaties vraag je om alt-tekst die het patroon beschrijft, een datatabel als fallback en meerdere visuele signalen naast kleur. Onthoud wel: AI is een versterker van menselijke expertise, geen vervanging. De gegenereerde code brengt je dichter bij de WCAG-norm, maar een handmatige review blijft onmisbaar.

Wettelijke verplichtingen rond digitale toegankelijkheid in Nederland #

Sinds 28 juni 2025 is de European Accessibility Act (EAA) van kracht. Waar eerder vooral overheidsorganisaties aan de WCAG-richtlijnen moesten voldoen, geldt de verplichting nu ook voor webshops, platforms, banken en vrijwel alle commerciële websites. Kleine ondernemingen met minder dan 10 werknemers of een jaaromzet onder €2 miljoen zijn vrijgesteld.

Overheidswebsites en apps vallen al sinds 2018 onder het Besluit digitale toegankelijkheid overheid. De praktische standaard is WCAG 2.2 AA-conformiteit. Toezicht wordt gehouden door onder andere de Autoriteit Consument & Markt (ACM), en niet-naleving kan leiden tot aanzienlijke boetes. Met naar schatting 15 tot 20% van de Nederlandse bevolking die een vorm van beperking heeft, is digitale toegankelijkheid geen vrijblijvende ambitie meer.

Tools en checklists voor toegankelijkheidscontrole #

Een combinatie van geautomatiseerde en handmatige tools geeft het beste resultaat bij het controleren van je vibecoded website. Geautomatiseerde tools zoals axe-core, Lighthouse en WAVE bieden een snelle baseline, terwijl handmatige tests de werkelijke gebruikerservaring blootleggen.

Belangrijk: geautomatiseerde tools vangen slechts een deel van alle toegankelijkheidsproblemen op. AI-overlays die claimen alles automatisch op te lossen zijn geen betrouwbare oplossing — ze interfereren vaak met hulptechnologieën en worden juridisch aangevochten.

Toegankelijkheidseisen toepassen op een vibecoded website is geen eenmalige actie, maar een doorlopend proces dat begint bij de prompt en eindigt bij handmatige validatie. Of je nu een publieke organisatie bent die al aan het Besluit digitale toegankelijkheid overheid moet voldoen, of een commerciële partij die onder de EAA valt — grip krijgen op de compliance van je digitale omgeving is essentieel. Wij helpen organisaties met onze Compliance & Security Scan om risico’s, kwetsbaarheden en compliancegaten in kaart te brengen. Wil je weten hoe jouw digitale omgeving ervoor staat? Neem dan contact met ons op.