v0 is de AI-bouwer van Vercel: je beschrijft een pagina of app in een chat, en v0 schrijft de code, toont een live voorbeeld en zet het resultaat online. De code is modern en netjes, maar v0 bouwt wat je vraagt. Staat toegankelijkheid niet in je vraag, dan duiken steeds dezelfde problemen op. Deze gids laat zien waar je op let, hoe je v0 vaste instructies geeft en hoe je de gepubliceerde site controleert.
Wat v0 bouwt
Volgens de veelgestelde vragen van v0 werkt v0 met Next.js, React, TypeScript, Tailwind CSS en shadcn/ui. React is een veelgebruikte manier om webpagina’s te bouwen, Next.js bereidt die pagina’s voor op de server en Tailwind CSS geeft ze een uiterlijk met korte klassennamen. shadcn/ui is een verzameling kant-en-klare onderdelen, zoals menu’s, dialoogvensters en tabbladen, gebouwd op een bibliotheek die Radix heet.
Dat laatste is goed nieuws: de dialoogvensters, keuzemenu’s en tabbladen van shadcn/ui werken met het toetsenbord en geven de juiste informatie aan schermlezers (software die het scherm voorleest). Maar alles wat v0 zelf van nul opbouwt, zoals een eigen raster met kaarten of een bewegende banner, hangt af van je instructies.
Problemen die vaak opduiken
Deze patronen komen regelmatig voor. Duidelijke instructies voorkomen de meeste.
- Knoppen met alleen een icoon, zonder naam. Gegenereerde ontwerpen gebruiken vaak kleine icoonknoppen voor het menu, zoeken, sluiten en sociale media. Zonder naam in de code zegt een schermlezer alleen “knop”.
- Lichtgrijze tekst met te weinig contrast. Het standaardthema gebruikt een gedempt grijs voor bijkomende tekst. Op wit of op lichtgrijze kaarten zakt dat vaak onder het minimumcontrast.
- De verkeerde taal van de pagina. Het hoofdbestand van de lay-out stelt de taal één keer in, meestal op Engels. Een Nederlandstalige site die nog “Engels” zegt, wordt met de verkeerde uitspraak voorgelezen.
- Dezelfde titel op elke pagina. De paginatitel staat in het tabblad van de browser en is het eerste wat een schermlezer voorleest. Vraag je er niet naar, dan delen pagina’s vaak één algemene titel.
- Klikbare kaarten. Een prijs- of productkaart die op een muisklik reageert maar geen echte link of knop is, bereik je niet met de Tab-toets.
- Veel beweging. Invliegende blokken en schuivende secties ogen verzorgd, maar kunnen sommige mensen duizelig maken.
- Algemene beschrijvingen bij afbeeldingen. Als je een tijdelijke afbeelding vervangt door een echte foto, blijft de beschrijving (alt-tekst) vaak algemeen.
Waar je vaste instructies zet
v0 noemt vaste instructies Instructions. Ze worden bij je account bewaard en je kunt ze in elke chat aanzetten. De documentatie van v0 beschrijft hoe je er een maakt:
- Klik op de knop + in de invoerbalk.
- Kies onder Instructions voor New Instruction.
- Geef een Title, bijvoorbeeld “Toegankelijkheid”, en plak het blok hieronder in Rule.
- Klik op Add.
Om de instructie te gebruiken, klik je opnieuw op + en vink je ze aan. Een aangevinkte instructie geldt voor elk bericht tot je ze uitvinkt, dus kijk bij een nieuwe chat of ze nog aanstaat. De menu’s van v0 veranderen geregeld; zoek naar “Instructions” als de stappen hierboven verschoven zijn. Vink voor een grotere opschoning ook de ingebouwde instructie Plan Mode aan: v0 legt dan eerst zijn plan uit en wacht op je akkoord.
Instructies voor v0
Plak dit in een nieuwe instructie. Pas de taalcode aan als je site niet in het Nederlands is.
Toegankelijkheidsregels voor elke wijziging (mik op WCAG 2.2 niveau AA): - Gebruik semantische elementen: header, nav, main, footer. Gebruik Link van next/link voor navigatie en Button voor acties. Zet nooit onClick op een div, span of Card. Is een hele kaart klikbaar, zet er dan een echte link in. - Elke Button met alleen een icoon (size="icon", lucide-react) krijgt een aria-label in de taal van de site, zoals "Menu openen". Zet aria-hidden op het icoon. - Elk Input-, Select- en Textarea-veld heeft een zichtbaar Label, gekoppeld met htmlFor. Een placeholder is nooit het enige label. Foutmeldingen staan als tekst bij het veld, niet alleen in een toast. - Tekstcontrast is minstens 4.5:1, grote tekst en iconen 3:1. Controleer text-muted-foreground op elke achtergrond, ook op kaarten, verlopen en in donkere modus. - Behoud de zichtbare focusrand (focus-visible-klassen) op alle bedienbare elementen. - Zet in app/layout.tsx <html lang="nl">. Geef elke pagina een eigen titel via de metadata-export. - Eén h1 per pagina, koppen in volgorde. Kies een kopniveau nooit om de grootte. - Behoud het toetsenbordgedrag van shadcn/ui- en Radix-onderdelen. Dialoogvensters sluiten met Escape en zetten de focus terug op de knop die ze opende. - Elke next/image heeft een alt-tekst die het doel beschrijft; decoratieve afbeeldingen krijgen alt="". - Zet animaties in motion-safe: of controleer prefers-reduced-motion. Geen carrousels die vanzelf draaien zonder pauzeknop. - Zet een link "Naar de hoofdinhoud" als eerste onderdeel op elke pagina.
Vervolgprompts voor veelvoorkomende problemen
Vraag na een controle om één oplossing tegelijk. Vervang de delen tussen vierkante haken.
- Icoonknoppen: “Geef elke knop met alleen een icoon in [de kopbalk en de voettekst] een duidelijke Nederlandse naam die zegt wat hij doet. Verander niets aan het uiterlijk.”
- Contrast: “De grijze bijkomende tekst heeft te weinig contrast op [de prijskaarten]. Maak de gedempte tekstkleur in het thema donkerder tot ze minstens 4.5:1 haalt op elke achtergrond waar ze voorkomt, in lichte en donkere modus. Geef me de nieuwe waarden.”
- Taal en titels: “Zet de paginataal in de hoofdlay-out op [Nederlands, nl] en geef elke pagina een eigen, beschrijvende titel.”
- Klikbare kaarten: “Ik bereik [de projectkaarten] niet met de Tab-toets. Haal de klikfunctie van de kaart en zet een echte link op de titel, zodat de kaart met het toetsenbord werkt.”
- Beweging: “Zet de animaties in [de banner en bij het scrollen] uit als de bezoeker op zijn toestel heeft gevraagd om minder beweging.”
Pas je kleuren aan in de visuele Design-modus van v0, controleer het contrast dan opnieuw.
Publiceren en controleren
ibin controleert pagina’s op het openbare web en heeft dus een adres nodig dat iedereen kan openen. v0 publiceert op Vercel.
- Publiceer. Kies Publish bovenaan de chat. De eerste keer vraagt v0 een projectnaam, wie de site mag zien en een domein. Het standaardadres eindigt op vercel.app.
- Zorg dat het adres openbaar is. Kies bij het publiceren een zichtbaarheid waarmee iedereen de site kan openen. Vercel kan voorbeeldadressen ook afschermen zodat alleen aangemelde teamleden ze zien; dat heet Deployment Protection. Een controletool kan niet inloggen, dus controleer het openbare productieadres of een voorbeeldadres zonder afscherming.
- Controleer de pagina met ibin. Begin met de startpagina en daarna je belangrijkste formulier.
- Plak de oplossing in v0. Bij elk probleem in het rapport staat de knop “Instructies voor een AI-tool kopiëren”. Plak het resultaat in de chat van v0; het vraagt om een oplossing in de site zelf.
- Publiceer de wijzigingen en controleer opnieuw. Open Publish en kies Publish Changes. Wijzigingen staan pas op het openbare adres nadat je publiceert.
- Controleer meer pagina’s. Meld je aan om tot 200 pagina’s van dezelfde site te controleren, en zet wekelijkse controles aan om problemen te zien die na latere aanpassingen terugkomen.
Automatische controles vinden ruwweg een derde tot de helft van alle problemen. Doe daarom ook de toetsenbordtest van 10 minuten: leg de muis weg en ga met de Tab-toets door het menu, open en sluit een dialoogvenster en verstuur je formulier.
Wat v0 niet kan beoordelen
v0 kan een foto beschrijven als “persoon aan een laptop”, maar weet niet dat het om je verantwoordelijke voor klantcontact gaat. Het kan niet inschatten of drie links met “Lees meer” nog zin hebben als een schermlezer alle links op een pagina opsomt, en ook niet of je tekst te volgen is voor wie Nederlands als tweede taal leest. Kijk beschrijvingen van afbeeldingen en linkteksten zelf na telkens als je inhoud toevoegt. De optionele tweede blik van AI in ibin geeft deze punten een score van 1 tot 5, zodat je weet waar je begint, maar een mens beslist.
Zie ook het overzicht voor AI-bouwers en de herstelgidsen, bijvoorbeeld over knoppen zonder naam en kleurcontrast.
Controleer je v0-site
Publiceer je project en controleer gratis een pagina met ibin. Kopieer de instructies bij elk probleem naar v0, publiceer de wijzigingen 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.