Ob Sie im Chatfenster mit Lovable, Bolt, v0 oder Replit bauen oder einen Coding-Agent wie Claude Code, Cursor oder GitHub Copilot im eigenen Projekt Code schreiben lassen: Die KI baut, worum Sie sie bitten. Barrierefreiheit, also eine Website, die auch Menschen mit Behinderung nutzen können, entsteht nur verlässlich, wenn Sie danach fragen. Diese Seite ist die Kurzfassung: fünf Gewohnheiten, ein Anweisungsblock für jedes Tool und eine Routine, um das Ergebnis zu prüfen. Die Anleitungen für die einzelnen Tools, unten verlinkt, zeigen, wohin die Anweisungen gehören und auf welche Probleme Sie achten sollten.
Warum Barrierefreiheit untergeht
KI-Modelle lernen aus bestehenden Websites, und die meisten davon sind nicht barrierefrei. Bei der Auswertung von WebAIM 2026 über die eine Million meistbesuchten Startseiten hatten 95,9 % Probleme, die automatische Tests erkennen. Ein Tool, das von der durchschnittlichen Website lernt, übernimmt auch deren Gewohnheiten: hellgraue Schrift, Schaltflächen, die nur aus einem Symbol bestehen, Formulare ohne Beschriftung.
Drei weitere Dinge arbeiten gegen Sie:
- Sie urteilen mit den Augen. Ein Baukasten zeigt, wie die Seite aussieht, nicht wie sie in einem Screenreader (Software, die den Bildschirminhalt vorliest) klingt oder wie sie sich nur mit der Tastatur bedienen lässt.
- Gespräche vergessen. Eine Bitte von vor zwanzig Nachrichten zählt vielleicht nicht mehr, wenn die KI eine Seite neu schreibt.
- Jede Änderung kann eine Korrektur rückgängig machen. Ein neuer Abschnitt oder ein neues Design kann ein bereits gelöstes Problem zurückbringen.
Fünf Gewohnheiten, die die meisten Probleme verhindern
1. Legen Sie Ihre Anweisungen dauerhaft ab
Jedes ernsthafte Tool hat einen Ort für dauerhafte Anweisungen, die bei jeder Anfrage gelten: Knowledge oder Projektanweisungen in Chat-Baukästen, eine Anweisungsdatei bei Coding-Agents. Legen Sie Ihre Barrierefreiheitsregeln dort einmal ab, statt sie in jedem Prompt zu wiederholen. Die Anleitungen pro Tool sagen Ihnen, wo dieser Ort ist.
2. Verlangen Sie echte Schaltflächen, echte Links und sichtbare Beschriftungen
Verlangen Sie „semantisches HTML“: Seitenteile, die sagen, was sie sind. Eine Schaltfläche muss eine echte Schaltfläche sein, kein Kasten, der auf Klicks reagiert, damit sie mit der Tab-Taste funktioniert und ein Screenreader sie ansagt. Jedes Formularfeld braucht eine sichtbare Beschriftung darüber, nicht nur grauen Hinweistext, der beim Tippen verschwindet.
3. Halten Sie den Fokus sichtbar
Wer mit der Tab-Taste durch eine Seite geht, sieht an einem Rahmen oder einer Unterstreichung, wo er gerade ist. Das ist die Fokusanzeige. „Cleane“ Designs entfernen sie oft. Verlangen Sie einen deutlichen Fokusstil für jeden Link, jede Schaltfläche und jedes Feld, und lassen Sie die KI ihn nie ohne Ersatz entfernen.
4. Prüfen Sie den Kontrast
Kontrast ist der Helligkeitsunterschied zwischen Text und Hintergrund. Normaler Text braucht ein Verhältnis von mindestens 4,5:1, großer Text 3:1, so die WCAG 2.2, die internationalen Richtlinien für Barrierefreiheit, auf die sich die meisten Gesetze stützen, auch das BFSG und die BITV 2.0. Blassgrau auf Weiß, Text auf Fotos und zarte Pastelltöne sind die üblichen Ursachen. Prüfen Sie auch den Dunkelmodus, wenn Ihre Website einen hat.
5. Schreiben Sie Bildbeschreibungen und Linktexte selbst
Alternativtext ist die kurze Beschreibung, die ein Screenreader statt eines Bildes vorliest. Die KI kann ihn ausfüllen, weiß aber nicht, dass das Foto Ihr Geschäft zeigt oder dass es im Diagramm um die Buchungen dieses Jahres geht. Mit Linktexten ist es genauso: Sechsmal „Mehr erfahren“ auf einer Seite sagt jemandem mit Screenreader nichts. Prüfen Sie beides selbst, jedes Mal wenn Sie ein Bild oder einen Link hinzufügen.
Anweisungen für jedes Tool
Fügen Sie diesen Block in die dauerhaften Anweisungen Ihres Tools ein, bevor Sie mit dem Bauen beginnen. In einem Tool ohne solche Anweisungen setzen Sie ihn an den Anfang Ihrer ersten Nachricht. Gibt es Ihre Website schon, ergänzen Sie ihn und bitten Sie die KI dann, jede Seite danach zu prüfen.
Barrierefreiheitsregeln für dieses ganze Projekt (Ziel: WCAG 2.2 Stufe AA). Halte sie bei jeder Änderung ein und sag mir, wenn eine Anfrage ihnen widerspricht. - Verwende semantisches HTML: header, nav, main, footer, echte button-Elemente für Aktionen und echte a-Elemente für Links. Mache nie ein div, span oder eine Karte allein klickbar. - Jedes Formularfeld hat eine sichtbare, verknüpfte Beschriftung. Ein Platzhalter ist nie die einzige Beschriftung. Zeige Fehler als Text neben dem Feld, nicht nur in einem Toast oder in Farbe. - Jede Schaltfläche und jeder Link, die nur aus einem Symbol bestehen, haben einen zugänglichen Namen in der Sprache der Website, zum Beispiel "Menü öffnen". - Behalte auf jedem interaktiven Element einen deutlich sichtbaren Fokusstil. Entferne Outlines nie ohne sichtbaren Ersatz. - Der Textkontrast beträgt mindestens 4,5:1 (3:1 für großen Text, Symbole, Feldränder und Fokusstile), im hellen und im dunklen Modus. - Bedeutungstragende Bilder haben einen Alternativtext, der ihren Zweck beschreibt; dekorative Bilder bekommen alt="". Frag mich, wenn du nicht wissen kannst, was ein Bild zeigt. - Ein Linktext sagt, wohin der Link führt. Kein "hier klicken" und kein wiederholtes "mehr lesen". - Setze die Seitensprache auf dem html-Element (lang="de") und gib jeder Seite einen eindeutigen Titel. Ein h1 pro Seite, Überschriften in der richtigen Reihenfolge. - Alles funktioniert nur mit der Tastatur. Dialoge holen den Fokus hinein, schließen mit Escape und geben den Fokus danach zurück. - Beachte prefers-reduced-motion. Vermittle Bedeutung nie nur über Farbe.
Prüfen, beheben, erneut prüfen
Dafür müssen Sie keinen Code lesen. Sie brauchen eine Routine, die Sie wiederholen, bis die wichtigen Probleme verschwunden sind.
- Veröffentlichen Sie eine Vorschau unter einer öffentlichen Webadresse. Ein Prüfwerkzeug erreicht keine Seite, die nur im Baukasten oder hinter einem Login existiert.
- Prüfen Sie die Seite mit ibin. Sie erhalten eine Liste der Probleme in verständlicher Sprache, sortiert danach, was Sie zuerst beheben sollten, mit einer Nahaufnahme der betroffenen Stelle.
- Kopieren Sie die Lösung. Bei jedem Problem gibt es die Schaltfläche „Anleitung für ein KI-Tool kopieren“. Fügen Sie das Ergebnis in Ihren Baukasten oder Agent ein. Es bittet um eine Reparatur in der Website selbst, nicht um ein Pflaster darüber.
- Beheben Sie ein Problem nach dem anderen. Kurze, gezielte Anfragen funktionieren besser als eine lange Liste.
- Prüfen Sie erneut, bis die dringendsten Probleme verschwunden sind. Melden Sie sich danach an, um bis zu 200 Seiten derselben Website zu prüfen, denn Baukästen wiederholen dasselbe Menü, dieselbe Fußzeile und dieselben Formulare überall.
- Schalten Sie wöchentliche Prüfungen ein, damit Sie erfahren, wenn eine spätere Änderung ein Problem zurückbringt.
Automatische Prüfungen finden etwa ein Drittel bis die Hälfte aller Probleme. Machen Sie deshalb auch den Tastaturtest in zehn Minuten auf Ihrer Startseite und mit Ihrem wichtigsten Formular. Die Reparaturanleitungen erklären jedes Problem verständlich, wenn Sie eine Lösung nachvollziehen möchten.
Was weiterhin ein Mensch beurteilen muss
Keine KI und keine automatische Prüfung kann entscheiden, ob eine Bildbeschreibung stimmt, ob ein Linktext ohne Zusammenhang verständlich ist, ob Ihre Texte gut lesbar sind oder ob ein Buchungsablauf logisch wirkt. Der optionale zweite Blick mit KI in ibin bewertet Bildbeschreibungen, Linktexte, Tastaturbedienung und Sprache auf einer Skala von 1 bis 5, damit Sie wissen, wo Sie zuerst hinsehen sollten. Diese Bewertungen sind Hinweise, keine Urteile. Bitten Sie wenn möglich jemanden, der täglich mit Tastatur oder Screenreader arbeitet, Ihre Website auszuprobieren.
Anleitungen für die einzelnen Tools
Jede Anleitung beschreibt, was das Tool erzeugt, wo seine dauerhaften Anweisungen liegen, einen darauf abgestimmten Block zum Einfügen und Folge-Prompts für die typischen Probleme.
- Lovable: Projekt-Knowledge und Workspace-Knowledge
- Bolt: Projekt-Knowledge und Bolts eigenes Hosting
- v0: Instructions, über die +-Schaltfläche im Eingabefeld
- Replit: die Anweisungsdatei des Replit-Agents
- Coding-Agents: Claude Code, Cursor, GitHub Copilot und ähnliche Tools
Eine ausführlichere Erklärung mit einer vollständigen Liste von Folge-Prompts finden Sie im Artikel Website mit KI gebaut? So wird sie ab dem ersten Prompt barrierefrei.
Prüfen Sie Ihre KI-Website
Veröffentlichen Sie eine Vorschau und prüfen Sie eine Seite kostenlos mit ibin. Nutzen Sie bei jedem Problem „Anleitung für ein KI-Tool kopieren“, fügen Sie das Ergebnis in Ihren Baukasten ein 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.