Site gebouwd met AI?

Met AI-websitebouwers zoals Lovable, Bolt en v0 beschrijf je een site in een chatvenster en zie je hem binnen enkele minuten verschijnen. Je typt "een landingspagina voor mijn yogastudio met een boekingsformulier" en de tool schrijft de code, meestal in React (een veelgebruikte manier om webpagina's te bouwen) met Tailwind CSS voor de vormgeving. Maar de bouwer doet vooral wat je vraagt. Staat toegankelijkheid niet in je instructies, dan hangt het van toeval af, en dan kan een site er verzorgd uitzien terwijl hij moeilijk te gebruiken is voor mensen die met het toetsenbord navigeren, een schermlezer gebruiken (software die het scherm voorleest) of meer contrast nodig hebben. Een korte set instructies bij de start en een eenvoudige controle achteraf voorkomen de meeste veelvoorkomende problemen. Dit artikel geeft je allebei, klaar om te kopiëren.

Waarom toegankelijkheid wegglipt bij AI-sites

Een site bouwen door met AI te chatten heet vaak "vibe coding", een term die Andrej Karpathy in februari 2025 introduceerde. Lovable, Bolt (bolt.new) en v0 van Vercel zijn enkele van de bekendste tools daarvoor. Alle drie laten ze je vaste instructies bewaren die bij elke vraag meetellen: Lovable en Bolt noemen dat knowledge en bewaren het in de projectinstellingen, in v0 bewaar je instructies (via de +-knop in het invoerveld) die bij elke chat gelden tot je ze uitzet. Sommige bouwers gebruiken kant-en-klare onderdelen zoals shadcn/ui, waarvan de menu's en dialoogvensters al met het toetsenbord werken, en in de documentatie van Lovable staan toegankelijkheidscontroles tussen de ingebouwde skills. Handige basis, maar die dekt alleen wat de AI ook echt gebruikt.

De diepere oorzaak is dat AI-modellen leren van bestaande webcode, en het grootste deel van het web is niet toegankelijk. Volgens de analyse van WebAIM uit 2026 van de één miljoen populairste homepages had 95,9% fouten die automatische tests kunnen vinden. Tekst met te weinig contrast stond op 83,9% van de pagina's, afbeeldingen zonder alt-tekst op 53,1% en formuliervelden zonder label op 51%. Een tool die leert van de gemiddelde website, neemt ook de gewoontes ervan over.

Patronen om op te letten

Deze patronen duiken vaak op in gegenereerde sites. Het zijn geen uitspraken over een bepaalde tool, en met duidelijke instructies voorkom je de meeste.

Klikbare vakken die geen echte knop zijn. Een kaart of gewoon vak (een "div" in code) reageert op een muisklik, maar je bereikt het niet met de Tab-toets en een schermlezer meldt niet dat je erop kunt drukken.
Trendy kleuren met weinig contrast. Vragen als "minimalistisch" of "zachte pasteltinten" leveren vaak lichtgrijze tekst op wit op, die veel mensen moeilijk kunnen lezen.
Knoppen met alleen een icoon en geen naam. Een menu-icoon, een sluitkruisje of een social-media-icoon dat een schermlezer alleen als "knop" voorleest. WebAIM vond lege knoppen op 30,6% en lege links op 46,3% van de homepages.
Velden met alleen een placeholder. De grijze voorbeeldtekst in een veld verdwijnt zodra je typt, en er is geen label dat zegt waarvoor het veld dient.
Afbeeldingen zonder alt-tekst. Alt-tekst is een korte geschreven beschrijving van een afbeelding die schermlezers voorlezen. Gegenereerde sites laten die vaak weg of vullen "image" of een bestandsnaam in.
Overal animaties. Fade-ins, parallax en carrousels die vanzelf draaien. Beweging kan sommige mensen duizelig maken, daarom hebben toestellen een instelling om beweging te beperken.
Pop-ups die het toetsenbord kwijtraken. Een venster gaat open, maar Tab springt erachter, Escape doet niets of je raakt er niet meer uit.
Geen paginataal en rommelige koppen. Zonder taal spreekt een schermlezer je Nederlandse tekst misschien uit met een Engels accent. Koppen die gekozen zijn om hun grootte, breken de structuur van de pagina.

De toegankelijkheidsinstructies om eerst te plakken

Plak het blok hieronder in de vaste instructies van je bouwer voor je de eerste versie maakt, of bovenaan je eerste prompt in tools zonder vaste instructies. Het verwijst naar WCAG, de Web Content Accessibility Guidelines van het W3C, de internationale standaard waarop de meeste toegankelijkheidsregels steunen.

We geven de instructies bewust in het Engels. AI-bouwers begrijpen ook Nederlands, maar met Engelse instructies krijg je doorgaans de meest voorspelbare resultaten, omdat de termen precies overeenkomen met wat in de code staat. Je site zelf blijft gewoon Nederlandstalig: punt 6 en 8 vragen de bouwer om de paginataal op Nederlands te zetten en knopnamen in het Nederlands te schrijven.

Accessibility requirements for this whole project. Aim for WCAG 2.2 level AA. Follow these rules in every change, and tell me when a request would conflict with them. All visible text on the site is in Dutch.

1. Use real buttons for actions and real links for navigation. Never make a div, span or card clickable on its own. If a whole card should be clickable, put a real link inside it.
2. Every form field has a visible label that stays visible while typing. A placeholder is never the only label. Error messages appear in text next to the field and explain how to fix the problem.
3. Every meaningful image has alt text in Dutch that describes what it shows or does. Decorative images get an empty alt (alt=""). Ask me when you cannot know what an image means.
4. Text has a contrast ratio of at least 4.5:1 against its background. Large text (24px, or about 19px bold) and icons, field borders and focus indicators need at least 3:1. This includes dark mode and text on images or gradients.
5. Every link, button and form field has a clearly visible keyboard focus style. Never remove the focus outline without a visible replacement.
6. Every icon-only button or link has a name in Dutch that says what it does, such as "Menu openen" or "Venster sluiten".
7. Each page has one h1 that describes it, and headings follow in order (h2, then h3) without skipping levels. Never choose a heading level for its size.
8. Set the page language on the html element to Dutch (lang="nl") and give every page a unique, descriptive title.
9. Everything works with a keyboard alone. Tab moves in a logical order, Enter and Space activate buttons, menus open and close with the keyboard, and Escape closes dialogs and menus. When a dialog opens, move focus into it, keep it there until it closes, then return focus to the button that opened it.
10. Respect the prefers-reduced-motion setting by turning off parallax, auto-playing carousels and large movement when it is on. Nothing moves automatically for more than five seconds without a way to pause it.
11. Tap targets are at least 24 by 24 pixels, and main buttons and menu items at least 44 by 44 pixels on mobile, with space between them.
12. Use header, nav, main and footer, and add a "Naar de hoofdinhoud" skip link as the first item on every page.
13. Never use colour alone to convey meaning, such as red for errors. Add text as well.
14. Keep the built-in keyboard and screen reader behaviour of the components you use.

Een contrastverhouding vergelijkt hoe licht tekst is ten opzichte van de achtergrond, van 1:1 (geen verschil) tot 21:1 (zwart op wit). De minimale grootte van 24 bij 24 pixels voor aanraakdoelen is een van de eisen die WCAG 2.2 toevoegde; 44 bij 44 is strenger en prettiger voor vingers.

Vervolgprompts voor specifieke problemen

Vraag na een controle telkens één oplossing tegelijk: korte, gerichte prompts geven betrouwbaardere resultaten dan één lange lijst. Ook deze prompts staan in het Engels. Vervang de delen tussen vierkante haken door wat in je rapport staat.

Knoppen zonder naam: "The report says buttons have no name. Give every icon-only button an accessible name in Dutch that says what it does, such as 'Menu openen'. Do not change how they look."
Te weinig contrast: "The report says text in [the footer] has too little contrast. Adjust the colours until all text reaches at least 4.5:1, or 3:1 for large text. Stay close to the brand colours and tell me the new values."
Ontbrekende labels: "The report says form fields have no label. Add a visible label in Dutch above every field in [the contact form], connected to its field."
Ontbrekende alt-tekst: "The report says images have no alt text. List every image on this page and suggest alt text in Dutch for each. Mark decorative images for an empty alt. Wait for my approval before applying."
Toetsenbordtoegang: "I cannot reach [the pricing cards] with the Tab key. Replace clickable divs with real buttons or links so everything works with the keyboard, in a logical order."
Onzichtbare focus: "When I press Tab, I cannot see where I am. Add a clear focus style to every link, button and field, with at least 3:1 contrast against the background."
Pop-ups: "The [booking] pop-up does not work with the keyboard. Move focus into it when it opens, keep Tab inside, close it with Escape and return focus to the button that opened it."
Taal en koppen: "The report says the page language is missing and headings skip levels. Set the page language to Dutch and fix the heading order without changing how the headings look."

Een werkwijze die werkt: prompten, publiceren, controleren, herhalen

Je hoeft geen code te lezen om je site in goede staat te houden. Je hebt een vaste lus nodig die je herhaalt tot de belangrijke problemen weg zijn.

Prompt met de instructies. Voeg het blok toe voor je iets laat genereren, of laat de bouwer een bestaand project ertegen nakijken.
Publiceer een voorbeeldversie. Zet de site of een preview op een openbaar webadres. Een controle kan geen pagina bereiken die alleen in de bouwer of achter een login zichtbaar is.
Controleer met ibin. Het rapport zegt wat er mis is, wie er last van heeft en waar het op de pagina staat, met close-ups.
Plak de problemen terug in de bouwer. Gebruik de beschrijving in gewone taal of de prompts hierboven. Ook de technische details onder "Code voor je ontwikkelaar" kun je in de bouwer plakken.
Controleer opnieuw tot er geen problemen met het label "Kritiek" meer zijn, en werk daarna de rest af. Meld je dan aan en controleer tot 200 pagina's van dezelfde site, want bouwers herhalen dezelfde header, footer en formulieren op elke pagina.
Doe de toetsenbordtest en bekijk je eigen inhoud, zoals hieronder beschreven.

De toetsenbordtest van tien minuten

Automatische controles vinden veel gangbare problemen, ruwweg een derde tot de helft van alles wat er mis kan zijn, maar niet alles. Leg je muis opzij en probeer dit op je homepage en je belangrijkste formulier.

Druk bovenaan op Tab. Is "Naar de hoofdinhoud" het eerste wat je bereikt, en zie je altijd waar je bent?
Blijf op Tab drukken. Bereik je elke link, knop en elk veld, in een volgorde die de pagina volgt?
Open en sluit het menu met Enter en Escape.
Vul het formulier in en verstuur het met alleen het toetsenbord. Zijn de foutmeldingen duidelijk?
Open een pop-up. Kun je hem sluiten met Escape en verdergaan waar je was?
Zet in de toegankelijkheidsinstellingen van je toestel "beweging beperken" aan en herlaad de pagina. Stoppen de grote animaties?
Zoom in tot 200%. Is alle tekst nog leesbaar?

Wat de AI niet kan weten

Sommige dingen kan geen bouwer of automatische controle voor je beoordelen, omdat ze afhangen van je doel en je publiek.

Of een beschrijving van een afbeelding klopt. De AI schrijft misschien "lachende vrouw achter een laptop", maar weet niet dat de foto je oprichter toont, of dat een grafiek moet laten zien dat het aantal boekingen verdubbelde.
Of linkteksten duidelijk zijn. Zes links met "Lees meer" verwarren iemand die een lijst met links laat voorlezen. "Lees meer over onze yogalessen" werkt overal.
Of je tekst helder is. Korte zinnen en bekende woorden helpen iedereen, ook mensen die in een tweede taal lezen.
Of de stappen logisch zijn. Een boekingsproces kan alle automatische tests doorstaan en toch verwarrend zijn.

Hetzelfde geldt voor alles wat je na de lancering toevoegt: elke nieuwe afbeelding heeft alt-tekst nodig, elke nieuwe link een tekst die zegt waar hij naartoe gaat. De optionele tweede blik van AI in ibin beoordeelt beschrijvingen van afbeeldingen, linkteksten, toetsenbordgebruik en duidelijke taal op een schaal van 1 tot 5, zodat je weet waar je eerst moet kijken. Een mens neemt de uiteindelijke beslissing, en als het kan, vraag je iemand die elke dag een toetsenbord of schermlezer gebruikt om je site te proberen.

Controleer je AI-site

Publiceer een voorbeeldversie en controleer gratis een pagina met ibin. Plak de problemen in gewone taal met de prompts hierboven in je bouwer, controleer opnieuw en gebruik de toegankelijkheidsgidsen als je een oplossing beter wilt begrijpen. Is je homepage in orde, meld je dan aan om gratis tot 200 pagina's van dezelfde site te controleren.

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.

Site gebouwd met AI? Maak hem toegankelijk vanaf de eerste prompt