Zum Inhalt springen

So behebt Claude Code Barrierefreiheitsfehler aus deinem Audit

KI-Coding-Assistenten wie Claude Code können Barrierefreiheitsfehler direkt im Code beheben, wenn sie wissen, wo die Fehler sind. So verbindest du Claude Code mit deinen sitebrunch Audits und worauf du achten solltest.

KI-Coding-Assistenten wie Claude Code können Barrierefreiheitsfehler direkt im Code beheben. Sie müssen aber wissen, wo die Fehler sind. Mit dem sitebrunch MCP Server liest Claude Code die Funde aus deinem Audit, behebt die technischen Probleme in deinen Dateien und dokumentiert jeden Fix zurück in sitebrunch. Inhalte aus dem CMS und Entscheidungen über das Design bleiben bei deinem Team.

Das Wichtigste in Kürze

  • Erst prüfst du manuell im Audit, dann behebt die KI die Funde über den MCP Server, danach prüfst du nach.

  • Der sitebrunch MCP Server gibt deinem KI-Assistenten für jeden Fund einen CSS-Selektor, eine Problembeschreibung und einen Lösungsvorschlag.

  • Gut geeignet sind technische Fehler wie fehlende Formular-Labels, fehlende ARIA-Labels oder eine falsche Überschriften-Hierarchie.

  • Alternativtexte formuliert die KI, solange sie im Code stehen. Kommen sie aus einem CMS, auf das die KI keinen Zugriff hat, überspringt sie den Fund und dokumentiert den Grund. Das gilt auch für Farbänderungen.

  • Der MCP Server ist in allen sitebrunch Plänen mit Audits enthalten, ohne Zusatzkosten.

Warum zuerst ein Mensch prüfen muss

Ein KI-Coding-Assistent sieht deinen Code. Er sieht nicht, wie sich deine Website bedienen lässt. Ob der Tastaturfokus sichtbar ist, ob ein Screenreader die Inhalte in sinnvoller Reihenfolge vorliest oder ob ein Dialog per Tastatur wieder geschlossen werden kann, merkst du erst beim Testen der laufenden Seite.

Automatische Prüftools helfen hier nur begrenzt. Das Accessibility-Team der britischen Regierung hat eine Testseite mit 143 bekannten Barrieren gebaut und gängige Tools darauf getestet (GOV.UK). Das beste Tool fand 41 Prozent der Barrieren.

Die sinnvolle Arbeitsteilung sieht deshalb so aus:

  1. Finden: Ein Mensch prüft die Website manuell, zum Beispiel in einem geführten sitebrunch Audit.

  2. Beheben: Die KI setzt die technischen Fixes im Code um.

  3. Nachprüfen: Ein Mensch prüft in einem Re-Audit, ob die Barrieren wirklich weg sind.

Was ist ein MCP Server?

Das Model Context Protocol (MCP) ist ein offener Standard, den Anthropic entwickelt hat. Er verbindet KI-Assistenten mit externen Daten und Tools. Viele KI-Tools unterstützen ihn inzwischen.

Der sitebrunch MCP Server nutzt diesen Standard, um deinem KI-Assistenten Zugriff auf deine Audit-Ergebnisse zu geben. Die KI-Verarbeitung läuft dabei in deinem eigenen KI-Tool. sitebrunch stellt nur die Audit-Daten bereit.

Welche Barrieren die KI beheben kann und welche nicht

Viele der häufigsten Fehler im Web sind technische Fehler im Code. Der WebAIM Million Report 2026 hat die Startseiten der eine Million meistbesuchten Websites automatisch geprüft. Ein Auszug:

  • 51 Prozent hatten Formularfelder ohne Beschriftung

  • 46,3 Prozent hatten leere Links

  • 30,6 Prozent hatten leere Buttons

  • 13,5 Prozent hatten keine Angabe zur Sprache des Dokuments

Die Grenze verläuft dabei nicht zwischen einfachen und schweren Fehlern, sondern entlang dessen, worauf die KI Zugriff hat. Alles, was in deinem Code steht, kann ein KI-Assistent gut beheben, wenn er die betroffene Stelle kennt. Inhalte, die aus einem CMS kommen, erreicht er nicht. Und Gestaltung bleibt eine Entscheidung deines Teams. Kurz gesagt: Im Code ja, im CMS nein.

Art des Problems

Beispiel

Was die KI tut

Fehlende Formular-Labels

Eingabefeld ohne verknüpftes Label

Behebt im Code

Fehlende ARIA-Labels

Icon-Button ohne zugänglichen Namen

Behebt im Code

Falsche Überschriften-Hierarchie

Auf h2 folgt direkt h4

Behebt im Code

Fehlende Landmarks

Kein main- oder nav-Element

Behebt im Code

Fehlendes alt-Attribut

Bild ohne alt-Attribut

Ergänzt Attribut und Text im Code, dein Team liest den Text gegen

Unpassender Alternativtext im Code

Alt-Text im Template beschreibt das Bild nicht

Formuliert den Text neu, dein Team liest gegen

Alternativtext aus dem CMS

Produktfoto, dessen Alt-Text in der Mediathek gepflegt wird

Überspringt und dokumentiert den Grund

Design-Änderungen

Farben mit zu wenig Kontrast

Überspringt und dokumentiert den Grund

Der Grund für diese Grenze: Texte aus einem CMS stehen nicht in deinen Code-Dateien. Die KI kann sie dort weder sehen noch ändern, also passt deine Redaktion sie im CMS an. Lies auch die Alternativtexte gegen, die die KI im Code schreibt. Ein Text, der das Bild falsch beschreibt, ist für Screenreader-Nutzer*innen schlechter als ein fehlender. Und eine neue Farbe ist eine Entscheidung für deine Marke, keine technische Korrektur.

Eine dritte Grenze betrifft selbstgebaute Bedienelemente. Menüs, Dropdowns, Slider oder Tabs, die erst per JavaScript zu Bedienelementen werden, brauchen die richtigen ARIA-Rollen, Zustände und eine funktionierende Tastaturbedienung. Die KI kann Attribute ergänzen. Ob sich das Element danach wirklich mit Tastatur und Screenreader bedienen lässt, zeigt aber nur ein Test an der laufenden Seite.

So funktioniert der Workflow in vier Schritten

Schritt 1: Audit durchführen. Der MCP Server arbeitet mit den Ergebnissen deiner sitebrunch Audits. Du prüfst deine Website manuell mit der Browser Extension, Schritt für Schritt und mit Anleitung. Das geht ab 49 Euro im Monat, als Kick-off Audit oder als vollständiges Audit mit allen 96 Prüfschritten nach EN 301 549 und WCAG 2.2. Alternativ lässt du das Audit von unseren Expert*innen durchführen.

Schritt 2: MCP Server verbinden. In Claude Code führst du dafür im Terminal diesen Befehl aus:

claude mcp add --transport http sitebrunch https://mcp.sitebrunch.com/

Beim ersten Aufruf öffnet sich dein Browser und du meldest dich mit deinem sitebrunch Account an. Danach bleibt die Verbindung bestehen. Die Einrichtung für Cursor, Windsurf, Codex, Claude Desktop und GitHub Copilot findest du auf der Seite zum MCP Server.

Schritt 3: Claude Code die Funde abarbeiten lassen. Öffne Claude Code in deinem Projekt und beschreibe die Aufgabe in normaler Sprache, zum Beispiel:

„Hole dir die kritischen Funde aus meinem letzten sitebrunch Audit für die Startseite. Behebe die technischen Probleme im Code. Überspringe alles, was aus dem CMS kommt oder eine Entscheidung über das Design braucht, und dokumentiere den Grund.“

Claude Code ruft daraufhin die Funde aus deinem Audit nach Schweregrad ab, holt sich zu jedem Fund Selektor, Screenshot und Lösungsvorschlag, sucht die passende Stelle im Code und setzt den Fix um.

Schritt 4: Ergebnisse prüfen. Jeder Fix landet als Kommentar am jeweiligen Fund in sitebrunch, inklusive der geänderten Dateien. Übersprungene Funde sind mit Begründung markiert, damit dein Team sie gezielt bearbeiten kann. Sieh dir die Änderungen im Code an, bevor du sie veröffentlichst. Starte danach ein Re-Audit, um zu prüfen, ob die Barrieren wirklich behoben sind.

Worauf du achten solltest

  • Arbeite in einem eigenen Branch. So kannst du jede Änderung vor dem Veröffentlichen prüfen und bei Bedarf zurücknehmen.

  • Fang mit den kritischen Funden an. Lass die KI zuerst die schweren Probleme auf den wichtigsten Seiten beheben, zum Beispiel Checkout oder Kontaktformular.

  • Prüf nach dem Fix manuell. Ein korrekter Code heißt noch nicht, dass die Seite gut bedienbar ist. Das zeigt nur ein erneuter Test.

  • Teste selbstgebaute Bedienelemente mit Tastatur und Screenreader. Hier reicht korrekter Code allein am wenigsten.

  • Plane die übersprungenen Funde ein. Alternativtexte aus dem CMS und Kontraste brauchen jemanden aus Redaktion oder Design.

FAQ

Welche KI-Tools funktionieren mit dem sitebrunch MCP Server?

Alle Tools, die das Model Context Protocol über HTTP unterstützen. Dazu gehören Claude Code, Claude Desktop, Cursor, Windsurf, GitHub Copilot in VS Code und Codex. Bei GitHub Copilot funktionieren die MCP-Tools nur im Agent-Modus.

Kostet der MCP Server extra?

Nein. Der MCP Server ist in allen sitebrunch Plänen enthalten, die Audits beinhalten. Die Kosten für die KI selbst hängen von deinem eigenen KI-Tool ab.

Kann die KI mein Audit ersetzen?

Nein. Die KI behebt Probleme, die ein Mensch vorher gefunden hat. Ob eine Website wirklich barrierefrei bedienbar ist, zeigt nur eine manuelle Prüfung. Die KI nimmt deinem Team aber einen großen Teil der Fleißarbeit beim Beheben ab: Stelle im Code suchen, Fix umsetzen, dokumentieren.

Einblicke & Praxiswissen

Accessibility Cafe

Bleibe in 15 Minuten informiert über alles rund um digitale Barrierefreiheit.

Unsere Webinare

Lerne, wie du mit sitebrunch Accessibility deine Website und PDFs barrierefrei machst.