Of je nu in een chatvenster bouwt met Lovable, Bolt, v0 of Replit, of een codeeragent zoals Claude Code, Cursor of GitHub Copilot code laat schrijven in je eigen project: de AI bouwt wat je vraagt. Toegankelijkheid, een site bruikbaar maken voor mensen met een beperking, komt er alleen betrouwbaar in als je erom vraagt. Deze pagina is de korte versie: vijf gewoontes, één blok instructies dat je in elke tool kunt plakken en een routine om het resultaat te controleren. De gidsen per tool, onderaan gelinkt, tonen waar de instructies horen en op welke problemen je moet letten.
Waarom toegankelijkheid erbij inschiet
AI-modellen leren van bestaande websites, en de meeste daarvan zijn niet toegankelijk. Bij de controle van WebAIM in 2026 van de een miljoen meest bezochte startpagina’s had 95,9% problemen die automatische tests kunnen vinden. Een tool die leert van de gemiddelde site, neemt ook de gewoontes ervan over: lichtgrijze tekst, knoppen die alleen een icoon zijn, formulieren zonder labels.
Daarnaast werken drie dingen tegen je:
- Je beoordeelt met je ogen. Een bouwer toont hoe de pagina eruitziet, niet hoe ze klinkt in een schermlezer (software die het scherm voorleest) of hoe ze werkt met alleen een toetsenbord.
- Gesprekken vergeten. Een vraag van twintig berichten geleden telt misschien niet meer wanneer de AI een pagina herschrijft.
- Elke wijziging kan een oplossing ongedaan maken. Een nieuwe sectie of een nieuw ontwerp kan een probleem terugbrengen dat je al had opgelost.
Vijf gewoontes die de meeste problemen voorkomen
1. Zet je instructies op een vaste plek
Elke serieuze tool heeft een plek voor vaste instructies die bij elke vraag meetellen: knowledge of projectinstructies in chatbouwers, een instructiebestand bij codeeragents. Zet je toegankelijkheidsregels daar één keer in, in plaats van ze in elke prompt te herhalen. De gidsen per tool vertellen je waar die plek zit.
2. Vraag om echte knoppen, echte links en zichtbare labels
Vraag om “semantische HTML”: onderdelen van de pagina die zeggen wat ze zijn. Een knop moet een echte knop zijn, geen vak dat op een klik reageert, zodat hij werkt met de Tab-toets en een schermlezer hem aankondigt. Elk formulierveld heeft een zichtbaar label erboven nodig, niet alleen grijze hulptekst die verdwijnt zodra je typt.
3. Houd de focus zichtbaar
Wie met de Tab-toets door een pagina gaat, ziet aan een kader of onderstreping waar hij staat. Dat is de focusindicator. Ontwerpen die er “strak” uitzien, laten hem vaak weg. Vraag om een duidelijke focusstijl op elke link, knop en elk veld, en laat de AI hem nooit weghalen zonder vervanging.
4. Controleer het contrast
Contrast is het verschil in lichtheid tussen tekst en achtergrond. Gewone tekst heeft een verhouding van minstens 4,5:1 nodig, grote tekst 3:1, volgens WCAG 2.2, de internationale toegankelijkheidsrichtlijnen waarop de meeste wetten steunen, ook de Europese toegankelijkheidswet. Bleekgrijs op wit, tekst op foto’s en zachte pasteltinten zijn de gebruikelijke boosdoeners. Controleer ook de donkere modus, als je site die heeft.
5. Schrijf zelf echte beeldbeschrijvingen en linkteksten
Alt-tekst is de korte beschrijving die een schermlezer voorleest in plaats van een afbeelding. De AI kan die invullen, maar weet niet dat de foto jouw winkel toont of dat de grafiek over de boekingen van dit jaar gaat. Met linkteksten is het net zo: zes keer “Lees meer” op één pagina zegt iemand met een schermlezer niets. Kijk beide zelf na, telkens als je een afbeelding of link toevoegt.
Instructies voor elke tool
Plak dit blok in de vaste instructies van je tool voordat je begint te bouwen. In een tool zonder vaste instructies plak je het bovenaan je eerste bericht. Bestaat je site al, voeg het dan toe en vraag de AI daarna om elke pagina ertegen na te kijken.
Toegankelijkheidsregels voor dit hele project (doel: WCAG 2.2 niveau AA). Volg ze bij elke wijziging en zeg het als een vraag ermee botst. - Gebruik semantische HTML: header, nav, main, footer, echte button-elementen voor acties en echte a-elementen voor links. Maak nooit een div, span of kaart op zich klikbaar. - Elk formulierveld heeft een zichtbaar, gekoppeld label. Een placeholder is nooit het enige label. Toon fouten als tekst naast het veld, niet alleen in een toast of in kleur. - Elke knop of link met alleen een icoon krijgt een toegankelijke naam in de taal van de site, zoals "Menu openen". - Houd op elk interactief element een duidelijk zichtbare focusstijl. Verwijder outlines nooit zonder zichtbare vervanging. - Tekstcontrast is minstens 4,5:1 (3:1 voor grote tekst, iconen, veldranden en focusstijlen), in lichte en donkere modus. - Betekenisvolle afbeeldingen krijgen alt-tekst die hun doel beschrijft; decoratieve afbeeldingen krijgen alt="". Vraag het mij als je niet kunt weten wat een afbeelding toont. - Een linktekst zegt waar de link naartoe gaat. Geen "klik hier" of herhaalde "lees meer". - Zet de paginataal op het html-element (lang="nl") en geef elke pagina een unieke titel. Eén h1 per pagina, koppen in volgorde. - Alles werkt met alleen het toetsenbord. Dialogen zetten de focus erin, sluiten met Escape en geven de focus daarna terug. - Respecteer prefers-reduced-motion. Gebruik nooit alleen kleur om iets duidelijk te maken.
Controleren, herstellen, opnieuw controleren
Je hoeft hiervoor geen code te lezen. Je hebt een routine nodig die je herhaalt tot de belangrijke problemen weg zijn.
- Publiceer een voorbeeld op een openbaar webadres. Een checker kan geen pagina bereiken die alleen in de bouwer bestaat of achter een login zit.
- Controleer de pagina met ibin. Je krijgt een lijst met problemen in gewone taal, gerangschikt op wat je eerst oplost, met een close-up van de plek waar elk probleem zit.
- Kopieer de oplossing. Bij elk probleem staat de knop “Instructies voor een AI-tool kopiëren”. Plak het resultaat in je bouwer of agent. Het vraagt om een herstelling in de site zelf, niet om een lapmiddel erbovenop.
- Los één probleem tegelijk op. Korte, gerichte vragen werken beter dan één lange lijst.
- Controleer opnieuw tot de dringendste problemen weg zijn. Meld je daarna aan om tot 200 pagina’s van dezelfde site te controleren, want bouwers herhalen hetzelfde menu, dezelfde voettekst en dezelfde formulieren overal.
- Zet wekelijkse controles aan, zodat je het hoort wanneer een latere wijziging een probleem terugbrengt.
Automatische controles vinden ongeveer een derde tot de helft van alle problemen. Doe daarom ook de toetsenbordtest in tien minuten op je startpagina en je belangrijkste formulier. De herstelgidsen leggen elk probleem in gewone taal uit wanneer je een oplossing wilt begrijpen.
Wat nog een mens nodig heeft
Geen AI en geen automatische controle kan beslissen of een beeldbeschrijving klopt, of een linktekst los van de context begrijpelijk is, of je tekst vlot leest of of een boekingsstap logisch aanvoelt. De optionele tweede blik van AI in ibin geeft beeldbeschrijvingen, linkteksten, toetsenbordgebruik en taal een score van 1 tot 5, zodat je weet waar je eerst kijkt. Die scores zijn aanwijzingen, geen oordelen. Vraag als het kan iemand die elke dag een toetsenbord of schermlezer gebruikt om je site te proberen.
Gidsen per tool
Elke gids behandelt wat de tool genereert, waar de vaste instructies staan, een blok om te plakken dat op die tool is afgestemd en vervolgprompts voor de typische problemen.
- Lovable: project-knowledge en workspace-knowledge
- Bolt: project-knowledge en de eigen hosting van Bolt
- v0: Instructions, via de +-knop in het invoerveld
- Replit: het instructiebestand van de Replit-agent
- Codeeragents: Claude Code, Cursor, GitHub Copilot en vergelijkbare tools
Wil je een uitgebreidere uitleg met een volledige lijst vervolgprompts, lees dan Site gebouwd met AI? Maak hem toegankelijk vanaf de eerste prompt.
Controleer je AI-site
Publiceer een voorbeeld en controleer gratis een pagina met ibin. Gebruik “Instructies voor een AI-tool kopiëren” bij elk probleem, plak het in je bouwer en controleer opnieuw tot de dringende problemen weg zijn.
Kijk hoe je eigen site scoort
Controleer gratis een pagina, zonder account. Je krijgt een duidelijke lijst van wat je eerst oplost, met afbeeldingen van waar elk probleem zit.