Replit ist ein Online-Arbeitsbereich, in dem Replit Agent, ein KI-Assistent, nach Ihrer Beschreibung eine Website oder App baut, ausführt und veröffentlicht. Agent erledigt vieles selbst, baut aber, worum Sie bitten: Kommt Barrierefreiheit in der Anfrage nicht vor, bleibt sie dem Zufall überlassen. Diese Anleitung zeigt, auf welche Probleme Sie achten sollten, wie Sie Anweisungen schreiben, die Agent bei jeder Anfrage liest, und wie Sie die veröffentlichte Website prüfen.
Was Replit Agent baut
Für Websites und Web-Apps nutzt Agent häufig React (eine weit verbreitete Technik zum Bauen von Webseiten), gestaltet mit Tailwind CSS, und Bausteine aus shadcn/ui, einer Sammlung fertiger Menüs, Dialogfenster und Formularfelder. Dahinter laufen meist ein kleiner Server in Node.js und eine PostgreSQL-Datenbank. Die genaue Auswahl hängt von Ihrer Anfrage ab, und Agent kann auch mobile Apps bauen. ibin prüft Webseiten, deshalb geht es in dieser Anleitung um Websites, die sich im Browser öffnen.
Die Bausteine von shadcn/ui sind ein guter Anfang: Ihre Dialoge, Ausklappmenüs und Registerkarten funktionieren mit der Tastatur und geben Screenreadern (Software, die den Bildschirminhalt vorliest) die richtigen Informationen. Viele Web-Apps von Replit sind außerdem Single-Page-Apps: Der Browser lädt eine einzige Seite und tauscht den Inhalt aus, wenn Sie auf einen Link klicken. Das wirkt schnell, verursacht aber die ersten beiden Probleme unten.
Häufige Probleme
Diese Muster tauchen regelmäßig auf. Klare Anweisungen verhindern die meisten davon.
- Ein Titel für alle Ansichten. In einer Single-Page-App bleibt der Titel im Browser-Tab oft auf jeder Ansicht gleich. Screenreader-Nutzer hören diesen Titel zuerst und erkennen daran, wo sie sind.
- Fokus, der nach dem Navigieren zurückbleibt. Nach einem Klick auf einen Menülink erscheint der neue Inhalt, aber die Tastaturposition bleibt im Menü. Wer mit Tastatur oder Screenreader arbeitet, merkt nicht, dass sich etwas geändert hat.
- Schaltflächen nur mit Symbol, ohne Namen. Ein Menü-, Schließen- oder Löschsymbol, das ein Screenreader nur als „Schaltfläche“ ansagt.
- Fehler, die nur als Toast erscheinen. Ein Toast ist die kleine Meldung, die in einer Ecke auftaucht und nach wenigen Sekunden verschwindet. Man übersieht sie leicht, und am Feld steht nichts darüber, was zu korrigieren ist.
- Gedämpfter Text mit zu wenig Kontrast. Zartgrauer Text auf Weiß oder auf hellgrauen Karten.
- Klickbare Zeilen und Karten. Tabellenzeilen und Karten in Dashboards, die auf einen Mausklick reagieren, aber mit der Tab-Taste nicht erreichbar sind.
Wo dauerhafte Anweisungen hingehören
Replit Agent liest eine Datei namens replit.md im Hauptordner Ihres Projekts. Laut der Dokumentation von Replit legt Agent diese Datei bei einem neuen Projekt an und nimmt ihren Inhalt bei jeder Anfrage mit, um Ihre Vorlieben, den Aufbau des Projekts und Ihren Programmierstil zu verstehen. Sie können sie wie jede andere Datei bearbeiten.
- Öffnen Sie replit.md im obersten Ordner Ihres Projekts. Fehlt sie, legen Sie dort eine Datei mit genau diesem Namen an; Agent findet sie nur im Hauptordner.
- Fügen Sie den Block unten am Ende ein.
Agent kann replit.md auch selbst aktualisieren. Sehen Sie ab und zu nach, ob Ihr Abschnitt zur Barrierefreiheit noch da ist.
Replit bietet außerdem Skills an, wiederverwendbare Anweisungen, die Sie in einem Projekt installieren. Für eine kurze Liste von Regeln ist replit.md aber der einfachste Ort.
Anweisungen für Replit
Fügen Sie diesen Block in replit.md ein. Passen Sie den Sprachcode an, wenn Ihre Website nicht auf Deutsch ist.
## Anforderungen an die Barrierefreiheit (nicht entfernen) Befolge diese Regeln bei jeder Änderung. Ziel: WCAG 2.2 Stufe AA. - Nutze semantische Elemente: header, nav, main, footer. Nutze echte Links für Navigation und echte Schaltflächen für Aktionen. Setze nie einen Klick-Handler auf ein div, eine Tabellenzeile oder eine Card. Ist eine ganze Karte klickbar, setze einen echten Link hinein. - Jede Schaltfläche nur mit Symbol hat ein aria-label in der Sprache der Website, etwa "Rechnung löschen". Setze aria-hidden auf das Symbol. - Jedes Formularfeld hat eine sichtbare, damit verknüpfte Beschriftung. Ein Platzhalter ist nie die einzige Beschriftung. Fehler stehen als Text am Feld, nicht nur in einem Toast. - Textkontrast mindestens 4.5:1, für großen Text und Symbole 3:1, im hellen und dunklen Modus. - Behalte einen gut sichtbaren Fokusstil auf jedem Link, jeder Schaltfläche und jedem Feld. - Setze lang="de" auf das html-Element. Aktualisiere den Dokumenttitel bei jedem Routenwechsel, etwa "Rechnungen – Meine App". - Setze nach einem Routenwechsel den Fokus auf die Hauptüberschrift der neuen Ansicht. - Eine h1 pro Ansicht, Überschriften in der richtigen Reihenfolge. - 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. - Bedeutungstragende Bilder haben einen Alternativtext; dekorative Bilder bekommen alt="". - Beachte prefers-reduced-motion bei Animationen. - 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.
- Titel und Fokus: „Wenn ich zu einer anderen Ansicht wechsle, bleibt der Titel im Tab gleich und der Tastaturfokus bleibt im Menü. Gib jeder Ansicht einen eigenen Titel und setze nach dem Navigieren den Fokus auf ihre Hauptüberschrift.“
- Symbolschaltflächen: „Gib jeder Schaltfläche, die nur ein Symbol zeigt, in [der Rechnungstabelle] einen Namen, der sagt, was sie tut und für welchen Eintrag. Ändere nichts am Aussehen.“
- Fehler nur im Toast: „Zeige in [dem Registrierungsformular] jeden Fehler als Text unter dem zugehörigen Feld, mit diesem Feld verknüpft. Behalte den Toast nur als Ergänzung.“
- Kontrast: „Dunkle den grauen Text auf [den Dashboard-Karten] ab, bis er mindestens 4.5:1 erreicht.“
- Klickbare Zeilen: „Ich kann [eine Bestellung] nicht mit der Tastatur öffnen. Ersetze den Klick auf die Tabellenzeile durch einen echten Link in der ersten Zelle.“
Agent kann testen, ob Funktionen arbeiten, aber was mit der Maus funktioniert, funktioniert nicht unbedingt mit der Tastatur. Bitten Sie ausdrücklich darum: „Teste den wichtigsten Ablauf nur mit der Tastatur und sag mir, wo es hakt.“
Veröffentlichen und prüfen
ibin prüft Seiten im öffentlichen Web und braucht deshalb eine Adresse, die jeder öffnen kann. Die Veröffentlichungsanleitung von Replit beschreibt die Schritte.
- Entwicklungsvorschau überspringen. Die Vorschauadresse, die Sie beim Bauen sehen, ist vorübergehend. Prüfen Sie die veröffentlichte App.
- Veröffentlichen. Wählen Sie Publish oben rechts im Editor. Die Adresse endet auf .replit.app.
- Öffentlichen Zugriff wählen. Replit bietet Public, Password protected, Workspace only und Invite only. Ein Prüfwerkzeug kann sich nicht anmelden und kein Passwort eingeben, wählen Sie also Public.
- Seite mit ibin prüfen. Beginnen Sie mit der Startseite, dann mit Ihrem wichtigsten Formular oder Ihrer wichtigsten Ansicht.
- Korrektur in Agent 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 Chat mit Agent ein; es bittet um eine Korrektur in der App selbst.
- Neu veröffentlichen und erneut prüfen. Änderungen im Editor erreichen die Live-App erst, wenn Sie Republish wählen. Die Adresse bleibt gleich.
- 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 zurückkehrende Probleme bemerken.
Ansichten hinter einer Anmeldung lassen sich von außen nicht prüfen; testen Sie diese selbst mit der Tastatur. Automatische Prüfungen finden ungefähr ein Drittel bis die Hälfte aller Probleme; machen Sie deshalb auch den Tastaturtest in zehn Minuten.
Was Agent nicht beurteilen kann
Agent kann eine Beschreibung für ein Foto schreiben, weiß aber nicht, ob es Ihr Produkt, Ihr Team oder nur eine Stimmung zeigt. Es kann nicht beurteilen, ob fünf Schaltflächen mit „Ansehen“ Sinn ergeben, wenn ein Screenreader sie auflistet, und auch nicht, ob Ihr Text für Menschen mit Deutsch als Zweitsprache klar 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 Formularfeldern ohne Beschriftung und Seitentiteln.
Prüfen Sie Ihre Replit-App
Veröffentlichen Sie Ihre App mit öffentlichem Zugriff und prüfen Sie eine Seite kostenlos mit ibin. Kopieren Sie die Anleitung zu jedem Problem in Replit Agent, veröffentlichen Sie neu 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.