Bolt von StackBlitz baut auf bolt.new Websites und Apps aus einem Chatgespräch. Es schreibt den Code, installiert, was nötig ist, und zeigt innerhalb weniger Minuten eine Live-Vorschau neben dem Chat. Wie jeder KI-Baukasten folgt es Ihrer Anfrage genau: Ist Barrierefreiheit nicht Teil davon, kann das Ergebnis fertig aussehen und trotzdem mit Tastatur oder Screenreader (Software, die den Bildschirminhalt vorliest) schwer zu bedienen sein. Diese Anleitung zeigt, was Bolt erzeugt, auf welche Probleme Sie achten sollten, wo Sie Anweisungen ablegen, damit Bolt sie bei jeder Änderung befolgt, und wie Sie das Ergebnis veröffentlichen und prüfen.
Was Bolt baut
Wenn Sie nichts Bestimmtes verlangen, startet Bolt ein Projekt meist mit React (eine weit verbreitete Technik zum Bauen von Webseiten), Vite und TypeScript, gestaltet mit Tailwind CSS und mit Symbolen aus der Sammlung Lucide. Sie können auch andere Frameworks verlangen, etwa Next.js, Astro, Vue oder Svelte. Braucht Ihr Projekt eine Datenbank oder Logins, stellt Bolt Cloud sie auf Basis von Supabase bereit, ohne separates Konto.
Bolt lässt Ihr Projekt in Ihrem eigenen Browser laufen, mit einer StackBlitz-Technik namens WebContainers. Deshalb erscheint die Vorschau so schnell. Es bedeutet aber auch, dass die Vorschau im Editor nur auf Ihrem Rechner existiert, was beim Prüfen wichtig ist (siehe unten).
Häufige Probleme
Diese Muster tauchen in generierten Websites regelmäßig auf. Sie sind keine Fehler jedes Bolt-Projekts, und klare Anweisungen verhindern die meisten.
- Selbst gebaute Menüs und Pop-ups. Bolts Standardeinstellung hält zusätzliche Pakete knapp, daher werden Menüs, Auswahllisten und Dialoge oft von Grund auf geschrieben, statt aus einer erprobten Komponentenbibliothek zu kommen. Selbst gebauten Versionen fehlt oft die Tastaturbedienung: Escape schließt sie nicht, oder Tab springt hinter einen offenen Dialog.
- Schaltflächen, die nur aus einem Symbol bestehen. Menü-, Schließen-, Such- und Social-Media-Schaltflächen mit Lucide-Symbol und ohne Namen. Ein Screenreader sagt nur „Schaltfläche“.
- Stockfotos mit vagen Beschreibungen. Bolt verlinkt oft kostenlose Stockfotos, um eine Seite zu füllen. Ihr Alternativtext, die Beschreibung, die ein Screenreader statt des Bildes vorliest, fehlt häufig oder ist nichtssagend, etwa „hero image“.
- Text auf Farbverläufen und Fotos. Große Einstiegsbereiche mit weißem Text auf hellem Foto oder grellem Farbverlauf erreichen oft den Mindestkontrast nicht.
- Klickbare Karten und Kästen. Eine Karte, die auf Mausklicks reagiert, aber kein echter Link und keine echte Schaltfläche ist, lässt sich mit der Tab-Taste nicht erreichen.
- Felder nur mit Platzhalter, und Formularfehler, die nur rot markiert werden, ohne Text, der erklärt, was zu korrigieren ist.
Wo dauerhafte Anweisungen hingehören
Bolt nennt seine dauerhaften Anweisungen Knowledge. Sie werden mit Ihren Anfragen mitgeschickt, Sie schreiben Ihre Barrierefreiheitsregeln also nur einmal.
- Projekt-Knowledge gilt für ein Projekt. Klicken Sie auf das Zahnrad oben in der Mitte des Bildschirms, wählen Sie All project settings und dann Knowledge im Menü links. Die Dokumentation von Bolt beschreibt diesen Weg.
- Knowledge in Ihren persönlichen Einstellungen gilt für alle Ihre Projekte. Legen Sie dort Regeln ab, die überall gelten sollen, etwa Ihren Barrierefreiheitsblock, und nutzen Sie Projekt-Knowledge für Markenfarben und Inhalte.
Ältere Projekte zeigen manchmal noch einen „Project Prompt“ oder eine Datei .bolt/prompt. Sie erfüllt denselben Zweck: Fügen Sie den Block dort ein, wenn Ihr Projekt sie hat. Menünamen ändern sich hin und wieder; suchen Sie nach „Knowledge“, falls der Weg oben nicht mehr stimmt.
Vor einer großen Änderung können Sie den Plan Mode nutzen, um Bolt Ihr Projekt anhand der Regeln prüfen zu lassen, ohne schon Code zu ändern.
Anweisungen für Bolt
Fügen Sie dies in Projekt-Knowledge oder in die Knowledge Ihrer persönlichen Einstellungen ein. Passen Sie die Sprache an, wenn Ihre Website nicht auf Deutsch ist.
Barrierefreiheitsregeln für jede Änderung (Ziel: WCAG 2.2 Stufe AA): - Verwende semantisches HTML: header, nav, main, footer, einen echten <button> für Aktionen und ein echtes <a> für Links. Setze nie onClick auf ein div, span oder eine Karte. Ist eine ganze Karte klickbar, setze einen echten Link hinein. - Menüs, Auswahllisten, Tabs und Dialoge funktionieren mit der Tastatur: Tab, Enter, Leertaste, Pfeiltasten wo erwartet, Escape zum Schließen. Dialoge holen den Fokus hinein, halten ihn dort und geben ihn beim Schließen zurück. Nutze dafür eine erprobte barrierefreie Komponentenbibliothek, wenn ein Eigenbau nicht zuverlässig ist. - Jede Schaltfläche und jeder Link, die nur aus einem Symbol (Lucide) bestehen, bekommen ein aria-label in der Sprache der Website, zum Beispiel "Menü öffnen". Das Symbol selbst ist aria-hidden. - Jedes Bild bekommt einen Alternativtext, der seinen Zweck auf dieser Seite beschreibt, nie "Bild" oder einen Dateinamen. Dekorative Bilder bekommen alt="". Liste mir die Stockfotos zur Prüfung auf. - Der Textkontrast beträgt mindestens 4,5:1, bei großem Text 3:1. Text auf Fotos oder Farbverläufen bekommt einen einfarbigen oder abgedunkelten Hintergrund. - Jedes Formularfeld hat eine sichtbare Beschriftung. Fehler erscheinen als Text neben dem Feld, nicht nur in Farbe. - Behalte auf jedem interaktiven Element einen deutlich sichtbaren Fokusstil. - Setze lang="de" auf dem html-Element und gib jeder Seite einen eindeutigen Titel. Ein h1 pro Seite, Überschriften in der richtigen Reihenfolge. - Beachte prefers-reduced-motion bei Animationen.
Folge-Prompts für häufige Probleme
Bitten Sie nach einer Prüfung um eine Korrektur nach der anderen. Ersetzen Sie die Teile in eckigen Klammern.
- Menüs und Dialoge: „[Das mobile Menü] funktioniert nicht mit der Tastatur. Lass es mit Enter und Escape öffnen und schließen, setze den Fokus beim Öffnen hinein und beim Schließen zurück auf die Menüschaltfläche.“
- Symbol-Schaltflächen: „Gib jeder Schaltfläche, die nur aus einem Symbol besteht, in [der Kopfzeile] einen klaren deutschen Namen, der sagt, was sie tut. Ändere nichts an ihrem Aussehen.“
- Stockfotos: „Liste jedes Bild auf [der Startseite] mit seinem aktuellen Alternativtext auf. Schlage eine Beschreibung vor, die zu seinem Zweck auf dieser Seite passt, und warte auf meine Zustimmung.“
- Text auf Bildern: „Der weiße Text im [Einstiegsbereich] hat zu wenig Kontrast. Lege eine dunkle Fläche oder einen einfarbigen Hintergrund dahinter, bis er mindestens 4,5:1 erreicht.“
- Klickbare Karten: „Ich erreiche [die Leistungskarten] nicht mit der Tab-Taste. Ersetze die Klickfunktion auf der Karte durch einen echten Link um den Titel.“
Veröffentlichen und prüfen
Die Vorschau im Bolt-Editor läuft in Ihrem eigenen Browser, deshalb kann ibin sie nicht erreichen. Sie brauchen zuerst eine öffentliche Adresse.
- Veröffentlichen Sie. Klicken Sie oben rechts auf Publish. Bolt hostet die Website für Sie unter einer Adresse auf bolt.host. Sie können auch Netlify verbinden, wenn Sie lieber dort hosten.
- Prüfen Sie die Seite mit ibin. Beginnen Sie mit der Startseite, dann mit Ihrem wichtigsten Formular.
- Fügen Sie die Lösung in Bolt ein. Bei jedem Problem im Bericht gibt es die Schaltfläche „Anleitung für ein KI-Tool kopieren“. Fügen Sie das Ergebnis in den Bolt-Chat ein. Es bittet um eine Korrektur in der Website selbst.
- Veröffentlichen Sie erneut und prüfen Sie erneut. Änderungen erscheinen erst nach dem Veröffentlichen unter der öffentlichen Adresse.
- Prüfen Sie weitere Seiten. Melden Sie sich an, um bis zu 200 Seiten derselben Website zu prüfen, und schalten Sie wöchentliche Prüfungen ein, um wiederkehrende Probleme zu erkennen.
Automatische Prüfungen finden etwa ein Drittel bis die Hälfte aller Probleme. Machen Sie deshalb auch den Tastaturtest in zehn Minuten. Bei selbst gebauten Menüs und Pop-ups sagt dieser Test mehr als jeder Bericht.
Was Bolt nicht beurteilen kann
Bolt kann einem Stockfoto eine Beschreibung geben, weiß aber nicht, ob das Foto überhaupt auf Ihre Seite gehört oder was es Besuchern sagen soll. Es kann nicht beurteilen, ob „Mehr erfahren“ verständlich ist, wenn ein Screenreader alle Links einer Seite auflistet, oder ob Ihr Text gut lesbar ist. Prüfen Sie Bildbeschreibungen und Linktexte selbst, jedes Mal wenn Sie Inhalte hinzufügen. Der optionale zweite Blick mit KI in ibin bewertet sie von 1 bis 5, damit Sie wissen, wo Sie anfangen, aber die Entscheidung trifft ein Mensch.
Den allgemeinen Ansatz, der in jedem Tool funktioniert, finden Sie in der Übersicht für KI-Baukästen. Die Reparaturanleitungen erklären jedes Problem verständlich, zum Beispiel Bildbeschreibungen und Linktexte.
Prüfen Sie Ihre Bolt-Website
Veröffentlichen Sie Ihr Projekt und prüfen Sie eine Seite kostenlos mit ibin. Kopieren Sie die Anleitung zu jedem Problem in Bolt, veröffentlichen Sie erneut und prüfen Sie erneut, bis die dringenden Probleme verschwunden sind.
Sehen Sie, wie Ihre Website abschneidet
Prüfen Sie kostenlos eine Seite, ohne Konto. Sie erhalten eine klare Liste, was zuerst zu beheben ist, mit Bildern, wo jedes Problem liegt.