Bolt, gemaakt door StackBlitz, bouwt websites en apps vanuit een chatgesprek op bolt.new. Het schrijft de code, installeert wat nodig is en toont binnen enkele minuten een live voorbeeld naast de chat. Zoals elke AI-bouwer volgt het je vraag nauwgezet: zit toegankelijkheid er niet in, dan kan het resultaat er af uitzien terwijl het moeilijk te gebruiken is met een toetsenbord of een schermlezer (software die het scherm voorleest). Deze gids toont wat Bolt genereert, op welke problemen je let, waar je instructies zet zodat Bolt ze bij elke wijziging volgt en hoe je het resultaat publiceert en controleert.
Wat Bolt bouwt
Vraag je niets specifieks, dan start Bolt een project meestal met React (een veelgebruikte manier om webpagina’s te bouwen), Vite en TypeScript, met Tailwind CSS voor de vormgeving en iconen uit de iconenset Lucide. Je kunt ook om andere frameworks vragen, zoals Next.js, Astro, Vue of Svelte. Heeft je project een database of logins nodig, dan levert Bolt Cloud die op Supabase, zonder apart account.
Bolt laat je project in je eigen browser draaien, met een techniek van StackBlitz die WebContainers heet. Daarom verschijnt het voorbeeld zo snel. Het betekent ook dat het voorbeeld in de editor alleen op jouw computer bestaat, en dat is belangrijk als je het wilt controleren (zie verder).
Problemen die vaak opduiken
Deze patronen zie je geregeld in gegenereerde sites. Het zijn geen fouten in elk Bolt-project, en duidelijke instructies voorkomen de meeste.
- Zelfgebouwde menu’s en pop-ups. De standaardopzet van Bolt houdt extra pakketten tot een minimum, dus menu’s, keuzelijsten en dialoogvensters worden vaak van nul geschreven in plaats van uit een geteste componentenbibliotheek te komen. Zelfgebouwde versies missen vaak toetsenbordondersteuning: Escape sluit ze niet, of Tab springt achter een open dialoogvenster.
- Knoppen die alleen een icoon zijn. Menu-, sluit-, zoek- en socialemediaknoppen met een Lucide-icoon en zonder naam. Een schermlezer zegt alleen “knop”.
- Stockfoto’s met vage beschrijvingen. Bolt linkt vaak naar gratis stockfoto’s om een pagina te vullen. Hun alt-tekst, de beschrijving die een schermlezer voorleest in plaats van de afbeelding, ontbreekt vaak of is algemeen, zoals “hero image”.
- Tekst op kleurverlopen en foto’s. Grote openingsblokken met witte tekst op een lichte foto of een fel kleurverloop halen vaak het minimale contrast niet.
- Klikbare kaarten en vakken. Een kaart die op een muisklik reageert maar geen echte link of knop is, bereik je niet met de Tab-toets.
- Velden met alleen een placeholder, en formulierfouten die alleen in rood verschijnen, zonder tekst die uitlegt wat je moet aanpassen.
Waar je vaste instructies zet
Bolt noemt zijn vaste instructies Knowledge. Ze gaan mee met je vragen, dus je schrijft je toegankelijkheidsregels maar één keer.
- Project-knowledge geldt voor één project. Klik op het tandwiel bovenaan in het midden van het scherm, kies All project settings en daarna Knowledge in het menu links. De documentatie van Bolt beschrijft die weg.
- Knowledge in je persoonlijke instellingen geldt voor al je projecten. Zet daar regels die je overal wilt, zoals je toegankelijkheidsblok, en houd project-knowledge voor huisstijlkleuren en inhoud.
Oudere projecten tonen soms nog een “project prompt” of een bestand .bolt/prompt. Dat doet hetzelfde: zet het blok daar als je project dat heeft. Menunamen veranderen af en toe, dus zoek naar “Knowledge” als de weg hierboven verschoven is.
Voor een grote wijziging kun je Plan mode gebruiken om Bolt je project tegen de regels te laten nakijken zonder al code te veranderen.
Instructies voor Bolt
Plak dit in project-knowledge of in de knowledge van je persoonlijke instellingen. Pas de taal aan als je site niet in het Nederlands is.
Toegankelijkheidsregels voor elke wijziging (doel: WCAG 2.2 niveau AA): - Gebruik semantische HTML: header, nav, main, footer, een echte <button> voor acties en een echte <a> voor links. Zet nooit onClick op een div, span of kaart. Is een hele kaart klikbaar, zet er dan een echte link in. - Menu’s, keuzelijsten, tabbladen en dialogen werken met het toetsenbord: Tab, Enter, spatie, pijltjestoetsen waar verwacht, Escape om te sluiten. Dialogen zetten de focus erin, houden hem daar en geven hem terug bij sluiten. Gebruik hiervoor een geteste toegankelijke componentenbibliotheek als zelf bouwen onbetrouwbaar is. - Elke knop of link 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 afbeelding krijgt alt-tekst die haar doel op deze pagina beschrijft, nooit "afbeelding" of een bestandsnaam. Decoratieve afbeeldingen krijgen alt="". Geef me een lijst van stockfoto’s om na te kijken. - Tekstcontrast is minstens 4,5:1, grote tekst 3:1. Tekst op foto’s of kleurverlopen krijgt een effen of verdonkerde achtergrond. - Elk formulierveld heeft een zichtbaar label. Fouten verschijnen als tekst naast het veld, niet alleen in kleur. - Houd op elk interactief element een duidelijk zichtbare focusstijl. - Zet lang="nl" op het html-element en geef elke pagina een unieke titel. Eén h1 per pagina, koppen in volgorde. - Respecteer prefers-reduced-motion bij animaties.
Vervolgprompts voor veelvoorkomende problemen
Vraag na een controle om één oplossing tegelijk. Vervang de delen tussen vierkante haken.
- Menu’s en dialogen: “[Het mobiele menu] werkt niet met het toetsenbord. Laat het openen en sluiten met Enter en Escape, zet de focus erin wanneer het opent en terug op de menuknop wanneer het sluit.”
- Icoonknoppen: “Geef elke knop met alleen een icoon in [de kopbalk] een duidelijke Nederlandse naam die zegt wat hij doet. Verander niets aan hoe ze eruitzien.”
- Stockfoto’s: “Geef een lijst van elke afbeelding op [de startpagina] met haar huidige alt-tekst. Stel een beschrijving voor die past bij haar doel op deze pagina, en wacht op mijn akkoord.”
- Tekst op afbeeldingen: “De witte tekst in [het openingsblok] heeft te weinig contrast. Voeg een donkere laag of effen achtergrond toe tot hij minstens 4,5:1 haalt.”
- Klikbare kaarten: “Ik bereik [de dienstenkaarten] niet met de Tab-toets. Vervang de klikfunctie op de kaart door een echte link rond de titel.”
Publiceren en controleren
Het voorbeeld in de editor van Bolt draait in je eigen browser, dus ibin kan het niet bereiken. Je hebt eerst een openbaar adres nodig.
- Publiceer. Klik rechtsboven op Publish. Bolt host de site voor je op een adres dat eindigt op bolt.host. Je kunt ook Netlify koppelen als je daar liever host.
- Controleer de pagina met ibin. Begin met de startpagina en daarna je belangrijkste formulier.
- Plak de oplossing in Bolt. Bij elk probleem in het rapport staat de knop “Instructies voor een AI-tool kopiëren”. Plak het resultaat in de chat van Bolt. 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. Bij zelfgebouwde menu’s en pop-ups zegt die test meer dan elk rapport.
Wat Bolt niet kan beoordelen
Bolt kan een beschrijving aan een stockfoto toevoegen, maar weet niet of die foto wel op je pagina hoort, of wat ze een bezoeker moet vertellen. 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 beeldbeschrijvingen en linkteksten.
Controleer je Bolt-site
Publiceer je project en controleer gratis een pagina met ibin. Kopieer de instructies bij elk probleem naar Bolt, 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.