Lovable maakt van een chatgesprek een werkende website of app. Het schrijft degelijke, moderne code, maar bouwt wat je vraagt: zit toegankelijkheid niet in je vraag, dan komen een paar problemen in project na project terug. Deze gids toont wat Lovable genereert, op welke problemen je let, waar je instructies zet zodat Lovable ze bij elke wijziging volgt en hoe je het resultaat controleert.
Wat Lovable bouwt
Lovable schrijft React (een veelgebruikte manier om webpagina’s te bouwen) in TypeScript, met Tailwind CSS voor de vormgeving. Sinds 13 mei 2026 draaien nieuwe projecten op TanStack Start, een React-framework dat pagina’s op de server klaarzet, zodat ze sneller laden en zoekmachines ze beter lezen. Oudere projecten zijn meestal single-page apps gebouwd met Vite. Voor gegevens, logins en bestanden gebruikt Lovable Supabase, rechtstreeks of via Lovable Cloud.
De meeste onderdelen van de interface komen uit shadcn/ui, een verzameling kant-en-klare componenten op basis van Radix. Menu’s, dialoogvensters, tabbladen en keuzelijsten uit die verzameling werken met het toetsenbord en geven schermlezers (software die het scherm voorleest) de juiste informatie. Een goed begin, maar het helpt alleen waar Lovable die componenten echt gebruikt en hun gedrag intact laat.
Problemen die vaak opduiken
Deze patronen zie je geregeld in gegenereerde sites. Het zijn geen fouten in elk Lovable-project, en duidelijke instructies voorkomen de meeste.
- Knoppen die alleen een icoon zijn. Lovable gebruikt de iconenset Lucide voor menu’s, sluitkruisjes, zoeken, sociale media en “in winkelmandje”. Zonder naam in de code zegt een schermlezer alleen “knop”.
- Foutmeldingen die alleen als toast verschijnen. Een toast is het kleine bericht dat in een hoek verschijnt en na een paar seconden weer verdwijnt. Staat een formulierfout alleen daar, dan missen mensen hem, en niets naast het veld zegt wat er moet veranderen.
- Gedempte tekst met te weinig contrast. Het standaardthema gebruikt een zacht grijs voor bijkomende tekst. Op wit, en zeker op lichtgrijze kaarten, haalt dat vaak het minimale contrast niet.
- Een ontbrekende of verkeerde paginataal. De paginataal vertelt een schermlezer welke uitspraak hij moet gebruiken. Een Nederlandstalige site die nog “Engels” aangeeft, wordt met een Engels accent voorgelezen.
- Klikbare kaarten en vakken. Een productkaart of prijsblok dat op een muisklik reageert maar geen echte link of knop is, bereik je niet met de Tab-toets.
- Velden met alleen een placeholder. De grijze hulptekst in een veld verdwijnt zodra je begint te typen.
Waar je vaste instructies zet
Lovable noemt zijn vaste instructies Knowledge. Ze gaan mee met elke vraag, dus je schrijft je toegankelijkheidsregels maar één keer.
- Project-knowledge geldt voor één project. Open de projectinstellingen door bovenaan op de projectnaam te klikken en Settings te kiezen, of druk op Ctrl+. (Cmd+. op een Mac), en ga naar het onderdeel Knowledge. De documentatie van Lovable beschrijft die weg.
- Workspace-knowledge geldt voor elk project in je workspace. Bouw je meerdere sites, zet de toegankelijkheidsregels dan daar, en houd project-knowledge voor zaken als huisstijlkleuren en inhoud.
Houd knowledge kort, met opsommingstekens. Menunamen veranderen af en toe, dus zoek naar “Knowledge” als de weg hierboven verschoven is.
Lovable heeft ook skills, herbruikbare werkwijzen die je start door in de chat een schuine streep te typen. Een van de ingebouwde skills is /accessibility, die veelvoorkomende toegankelijkheidsproblemen nakijkt en herstelt. Handig voor een controleronde, maar geen vervanging voor knowledge: een skill werkt wanneer je hem oproept, knowledge telt bij elke wijziging.
Instructies voor Lovable
Plak dit in project- of workspace-knowledge. Pas de taal aan als je site niet in het Nederlands is.
Toegankelijkheidsregels voor elke wijziging (doel: WCAG 2.2 niveau AA): - Gebruik semantische elementen: header, nav, main, footer, een echte <button> voor acties en een echte <a> of router-Link voor navigatie. 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 (Lucide) krijgt een aria-label in de taal van de site, zoals "Menu openen". Het icoon zelf is aria-hidden. - Elke Input, Select en Textarea heeft een zichtbaar, gekoppeld Label. Een placeholder is nooit het enige label. - Formulierfouten verschijnen als tekst naast het veld en zijn eraan gekoppeld. Toon een fout nooit alleen in een toast. - Tekstcontrast is minstens 4,5:1, grote tekst 3:1. Controleer text-muted-foreground op elke achtergrond, ook op kaarten en in donkere modus, en maak hem donkerder waar nodig. - Houd de zichtbare focusring op alle interactieve elementen. Verwijder hem nooit. - Zet lang="nl" op het html-element en geef elke pagina een unieke titel. - Eén h1 per pagina, koppen in volgorde. Kies kopniveaus niet om hun grootte. - Behoud het toetsenbordgedrag van shadcn/ui- en Radix-componenten. Dialogen sluiten met Escape en geven de focus terug. - Betekenisvolle afbeeldingen krijgen alt-tekst die hun doel beschrijft; decoratieve afbeeldingen krijgen alt="". - Respecteer prefers-reduced-motion bij animaties.
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 hoe ze eruitzien.”
- Fouten alleen in een toast: “Toon in [het contactformulier] elke fout als tekst onder het veld waar ze bij hoort, gekoppeld aan dat veld. Houd de toast alleen als extra.”
- Gedempte tekst: “De grijze bijkomende tekst heeft te weinig contrast op [de prijskaarten]. Maak de gedempte tekstkleur donkerder tot hij minstens 4,5:1 haalt op elke achtergrond waar hij voorkomt, in lichte en donkere modus.”
- Paginataal: “Zet de paginataal op elke pagina op Nederlands (nl).”
- Klikbare kaarten: “Ik bereik [de projectkaarten] niet met de Tab-toets. Vervang de klikfunctie op de kaart door een echte link rond de titel, zodat de kaart met het toetsenbord werkt.”
Na een grotere wijziging kun je ook /accessibility laten lopen en de pagina daarna opnieuw met ibin controleren.
Publiceren en controleren
ibin controleert pagina’s op het openbare web en heeft dus een adres nodig dat iedereen kan openen.
- Publiceer. Klik rechtsboven in de editor op Publish. Lovable stelt een adres voor dat eindigt op lovable.app, dat je kunt aanpassen. Deelbare voorbeeldlinks zijn bedoeld om werk aan een persoon te tonen en verlopen na zeven dagen, dus gebruik het gepubliceerde adres om te controleren.
- Zorg dat de site openbaar is. Op sommige abonnementen kun je de gepubliceerde site beperken tot je workspace. Een checker kan niet inloggen, dus kies Public zolang je controleert.
- Controleer de pagina met ibin. Begin met de startpagina en daarna je belangrijkste formulier.
- Plak de oplossing in Lovable. Bij elk probleem in het rapport staat de knop “Instructies voor een AI-tool kopiëren”. Plak het resultaat in de chat van Lovable. Het vraagt om een herstelling in de site zelf.
- Publiceer opnieuw en controleer opnieuw. Wijzigingen komen 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 vangen die terugkomen.
Automatische controles vinden ongeveer een derde tot de helft van alle problemen. Doe daarom ook de toetsenbordtest in tien minuten.
Wat Lovable niet kan beoordelen
Sommige dingen hangen af van kennis die alleen jij hebt. Lovable beschrijft een foto misschien als “team aan het werk in een kantoor”, maar weet niet dat ze jouw drie oprichters toont. Het kan niet inschatten of “Meer info” begrijpelijk is wanneer een schermlezer alle links op een pagina opsomt, of dat je tekst vlot leest. Kijk beeldbeschrijvingen en linkteksten zelf na telkens als je inhoud toevoegt. De optionele tweede blik van AI in ibin geeft ze een score van 1 tot 5, zodat je weet waar je begint, maar een mens beslist.
Voor de algemene aanpak die in elke tool werkt, zie het overzicht voor AI-bouwers. De herstelgidsen leggen elk probleem in gewone taal uit, bijvoorbeeld knoppen zonder naam en kleurcontrast.
Controleer je Lovable-site
Publiceer je project en controleer gratis een pagina met ibin. Kopieer de instructies bij elk probleem naar Lovable, publiceer opnieuw 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.