v0 ist der KI-Baukasten von Vercel: Sie beschreiben eine Seite oder App in einem Chat, und v0 schreibt den Code, zeigt eine Live-Vorschau und stellt das Ergebnis online. Der Code ist modern und aufgeräumt, aber v0 baut, worum Sie bitten. Kommt Barrierefreiheit in Ihrer Anfrage nicht vor, tauchen immer wieder dieselben Probleme auf. Diese Anleitung zeigt, worauf Sie achten sollten, wie Sie v0 dauerhafte Anweisungen geben und wie Sie die veröffentlichte Website prüfen.
Was v0 baut
Laut den FAQ von v0 arbeitet v0 mit Next.js, React, TypeScript, Tailwind CSS und shadcn/ui. React ist eine weit verbreitete Technik zum Bauen von Webseiten, Next.js bereitet diese Seiten auf dem Server vor, und Tailwind CSS gestaltet sie mit kurzen Klassennamen. shadcn/ui ist eine Sammlung fertiger Bausteine wie Menüs, Dialogfenster und Registerkarten, die auf einer Bibliothek namens Radix aufbauen.
Das ist eine gute Nachricht: Die Dialoge, Ausklappmenüs und Registerkarten von shadcn/ui funktionieren mit der Tastatur und geben Screenreadern (Software, die den Bildschirminhalt vorliest) die richtigen Informationen. Alles, was v0 von Grund auf selbst baut, etwa ein eigenes Kartenraster oder ein animiertes Banner, hängt dagegen von Ihren Anweisungen ab.
Häufige Probleme
Diese Muster tauchen regelmäßig auf. Klare Anweisungen verhindern die meisten davon.
- Schaltflächen nur mit Symbol, ohne Namen. Erzeugte Entwürfe nutzen oft kleine Symbolschaltflächen für Menü, Suche, Schließen und soziale Netzwerke. Ohne Namen im Code sagt ein Screenreader nur „Schaltfläche“.
- Hellgrauer Text mit zu wenig Kontrast. Das Standarddesign nutzt ein gedämpftes Grau für Nebentexte. Auf Weiß oder hellgrauen Karten liegt es oft unter dem Mindestkontrast.
- Die falsche Seitensprache. Die Hauptlayout-Datei legt die Sprache einmal fest, meist auf Englisch. Eine deutschsprachige Website, die noch „Englisch“ angibt, wird mit falscher Aussprache vorgelesen.
- Derselbe Titel auf jeder Seite. Der Seitentitel steht im Browser-Tab und ist das Erste, was ein Screenreader vorliest. Wenn Sie nicht danach fragen, teilen sich Seiten oft einen allgemeinen Titel.
- Klickbare Karten. Eine Preis- oder Produktkarte, die auf einen Mausklick reagiert, aber kein echter Link und keine echte Schaltfläche ist, erreichen Sie nicht mit der Tab-Taste.
- Viel Bewegung. Einblendungen und gleitende Abschnitte wirken edel, können manchen Menschen aber Schwindel bereiten.
- Allgemeine Bildbeschreibungen. Wenn Sie einen Platzhalter durch ein echtes Foto ersetzen, bleibt die Beschreibung (Alternativtext) oft allgemein.
Wo dauerhafte Anweisungen hingehören
v0 nennt dauerhafte Anweisungen Instructions. Sie werden in Ihrem Konto gespeichert und lassen sich in jedem Chat einschalten. Die Dokumentation von v0 beschreibt, wie Sie eine anlegen:
- Klicken Sie in der Eingabeleiste auf die Schaltfläche +.
- Wählen Sie unter Instructions den Eintrag New Instruction.
- Geben Sie einen Title ein, etwa „Barrierefreiheit“, und fügen Sie den Block unten in Rule ein.
- Klicken Sie auf Add.
Zum Verwenden klicken Sie erneut auf + und haken die Anweisung an. Eine angehakte Anweisung gilt für jede Nachricht, bis Sie den Haken entfernen. Prüfen Sie daher bei einem neuen Chat, ob sie noch aktiv ist. Die Menüs von v0 ändern sich regelmäßig; suchen Sie nach „Instructions“, falls die Schritte oben nicht mehr passen. Für eine größere Aufräumrunde haken Sie zusätzlich die eingebaute Anweisung Plan Mode an: v0 erklärt dann zuerst seinen Plan und wartet auf Ihre Zustimmung.
Anweisungen für v0
Fügen Sie diesen Block in eine neue Anweisung ein. Passen Sie den Sprachcode an, wenn Ihre Website nicht auf Deutsch ist.
Regeln zur Barrierefreiheit für jede Änderung (Ziel: WCAG 2.2 Stufe AA): - Nutze semantische Elemente: header, nav, main, footer. Nutze Link aus next/link für Navigation und Button für Aktionen. Setze nie onClick auf ein div, span oder eine Card. Ist eine ganze Karte klickbar, setze einen echten Link hinein. - Jeder Button nur mit Symbol (size="icon", lucide-react) bekommt ein aria-label in der Sprache der Website, etwa "Menü öffnen". Setze aria-hidden auf das Symbol. - Jedes Input-, Select- und Textarea-Feld hat ein sichtbares Label, verknüpft über htmlFor. Ein Platzhalter ist nie die einzige Beschriftung. Fehlermeldungen stehen als Text am Feld, nicht nur in einem Toast. - Textkontrast mindestens 4.5:1, für großen Text und Symbole 3:1. Prüfe text-muted-foreground auf jedem Hintergrund, auch auf Karten, Verläufen und im Dunkelmodus. - Behalte den sichtbaren Fokusrahmen (focus-visible-Klassen) auf allen bedienbaren Elementen. - Setze in app/layout.tsx <html lang="de">. Gib jeder Seite über den metadata-Export einen eigenen Titel. - Eine h1 pro Seite, Überschriften in der richtigen Reihenfolge. Wähle eine Überschriftenebene nie nach der Größe. - Behalte das Tastaturverhalten der shadcn/ui- und Radix-Bausteine. Dialoge schließen mit Escape und geben den Fokus an die Schaltfläche zurück, die sie geöffnet hat. - Jedes next/image hat einen Alternativtext, der seinen Zweck beschreibt; dekorative Bilder bekommen alt="". - Setze Animationen in motion-safe: oder prüfe prefers-reduced-motion. Keine selbstlaufenden Karussells ohne Pause-Schaltfläche. - Setze auf jeder Seite einen Link "Zum Hauptinhalt springen" an die erste Stelle.
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.
- Symbolschaltflächen: „Gib jeder Schaltfläche, die nur ein Symbol zeigt, in [Kopfbereich und Fußzeile] einen klaren deutschen Namen, der sagt, was sie tut. Ändere nichts am Aussehen.“
- Kontrast: „Der graue Nebentext hat auf [den Preiskarten] zu wenig Kontrast. Dunkle die gedämpfte Textfarbe im Design ab, bis sie auf jedem Hintergrund, auf dem sie vorkommt, mindestens 4.5:1 erreicht, im hellen und dunklen Modus. Nenne mir die neuen Werte.“
- Sprache und Titel: „Setze die Seitensprache im Hauptlayout auf [Deutsch, de] und gib jeder Seite einen eigenen, beschreibenden Titel.“
- Klickbare Karten: „Ich erreiche [die Projektkarten] nicht mit der Tab-Taste. Entferne den Klick von der Karte und setze einen echten Link auf den Titel, damit die Karte mit der Tastatur funktioniert.“
- Bewegung: „Schalte die Animationen [im Banner und beim Scrollen] ab, wenn Besucher auf ihrem Gerät reduzierte Bewegung eingestellt haben.“
Wenn Sie Farben im visuellen Design-Modus von v0 ändern, prüfen Sie den Kontrast danach erneut.
Veröffentlichen und prüfen
ibin prüft Seiten im öffentlichen Web und braucht deshalb eine Adresse, die jeder öffnen kann. v0 veröffentlicht auf Vercel.
- Veröffentlichen. Wählen Sie Publish oben im Chat. Beim ersten Mal fragt v0 nach einem Projektnamen, wer die Website sehen darf, und nach einer Domain. Die Standardadresse endet auf vercel.app.
- Adresse öffentlich machen. Wählen Sie beim Veröffentlichen eine Sichtbarkeit, bei der jeder die Website öffnen kann. Vercel kann Vorschauadressen außerdem so schützen, dass nur angemeldete Teammitglieder sie sehen; das heißt Deployment Protection. Ein Prüfwerkzeug kann sich nicht anmelden. Prüfen Sie deshalb die öffentliche Produktionsadresse oder eine ungeschützte Vorschauadresse.
- Seite mit ibin prüfen. Beginnen Sie mit der Startseite, dann mit Ihrem wichtigsten Formular.
- Korrektur in v0 einfügen. Bei jedem Problem im Bericht gibt es die Schaltfläche „Anleitung für ein KI-Tool kopieren“. Fügen Sie das Ergebnis in den v0-Chat ein; es bittet um eine Korrektur in der Website selbst.
- Änderungen veröffentlichen und erneut prüfen. Öffnen Sie Publish und wählen Sie Publish Changes. Änderungen erscheinen erst nach dem Veröffentlichen unter der öffentlichen Adresse.
- Mehr Seiten prüfen. Melden Sie sich an, um bis zu 200 Seiten derselben Website zu prüfen, und schalten Sie wöchentliche Prüfungen ein, damit Sie Probleme sehen, die nach späteren Änderungen zurückkehren.
Automatische Prüfungen finden ungefähr ein Drittel bis die Hälfte aller Probleme. Machen Sie deshalb auch den Tastaturtest in zehn Minuten: Legen Sie die Maus beiseite, gehen Sie mit der Tab-Taste durch das Menü, öffnen und schließen Sie einen Dialog und senden Sie Ihr Formular ab.
Was v0 nicht beurteilen kann
v0 kann ein Foto als „Person am Laptop“ beschreiben, weiß aber nicht, dass es Ihre Leiterin des Kundendienstes zeigt. Es kann nicht beurteilen, ob drei Links mit „Mehr erfahren“ noch Sinn ergeben, wenn ein Screenreader alle Links einer Seite auflistet, und auch nicht, ob Ihr Text für Menschen mit Deutsch als Zweitsprache gut verständlich ist. Prüfen Sie Bildbeschreibungen und Linktexte selbst, wann immer Sie Inhalte hinzufügen. Der optionale zweite Blick der KI in ibin bewertet diese Punkte von 1 bis 5, damit Sie wissen, wo Sie anfangen. Die Entscheidung trifft aber ein Mensch.
Siehe auch die Übersicht für KI-Baukästen und die Anleitungen zur Barrierefreiheit, zum Beispiel zu Schaltflächen ohne Namen und Farbkontrast.
Prüfen Sie Ihre v0-Website
Veröffentlichen Sie Ihr Projekt und prüfen Sie eine Seite kostenlos mit ibin. Kopieren Sie die Anleitung zu jedem Problem in v0, veröffentlichen Sie die Änderungen und prüfen Sie erneut, bis die dringenden Probleme behoben 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.