A11y Feedback MCP

Gib Coding- und Design-Agenten eine echte Barrierefreiheits-Feedbackschleife statt einer weiteren Erinnerung, „WCAG zu befolgen“.

a11y-feedback-mcp rendert eine Oberfläche in Chromium, führt axe-core aus und liefert jedem Model Context Protocol-Client umsetzbare Belege: verletzte Regeln, Auswirkungen, CSS-Selektoren, DOM-Snippets, berechnete Stile, Bounding-Boxes, Behebungsmaßnahmen und mathematisch bestandene Kontrastkandidaten.

Es funktioniert direkt mit Codex und Claude Code. Für Claude Design besteht der zuverlässige Workflow darin, Claude Code sowohl mit dem MCP-Server von Claude Design als auch mit diesem Server zu verbinden, dann das generierte HTML oder die Live-Vorschau zu prüfen und Korrekturen über den Design-Workflow zurückzusenden.

Dies ist ein automatisiertes Testhilfsmittel, kein WCAG-Zertifizierungsdienst. Es meldet bewusst unvollständige Prüfungen und erfordert menschliche Tests für Tastatur, Fokus, Screenreader, Zoom, Bewegung, Kognition und Inhaltsqualität.

Was „Live-Feedback“ bedeutet

flowchart TD
    A["Agent creates or changes UI"] --> B["Render at target viewport"]
    B --> C["Run axe + contrast analysis"]
    C --> D["Return evidence and correction"]
    D --> E["Agent proposes or applies code fix"]
    E --> F["Re-run same audit"]
    F --> G["Human checks incomplete behavior"]

Der Server ist schreibgeschützt. Er bearbeitet ein Projekt niemals stillschweigend. Der verbundene Agent verwendet die Belege, um eine begrenzte Änderung vorzunehmen, und führt dann die Prüfung erneut aus, um sie zu verifizieren.

Related MCP server: Accessibility MCP Server

Werkzeuge

Alle Werkzeuge sind als schreibgeschützt annotiert. Der Server stellt außerdem einen accessibility-fix-loop-Prompt bereit.

Standardprofile

Die Prüfwerkzeuge unterstützen wcag2a, wcag2aa, wcag2aaa, wcag21aa, wcag21aaa, wcag22aa, wcag22aaa und best-practice. AA-Profile enthalten alle erforderlichen A- und AA-Kriterien; AAA-Profile enthalten A, AA und AAA. wcag22aa bleibt die Standardeinstellung, da W3C die neueste WCAG-Version empfiehlt und davor warnt, gesamtseitiges AAA als allgemeine Richtlinie vorzuschreiben. Verwenden Sie AAA als ausdrückliches erweitertes Ziel und berichten Sie den Fortschritt auf Kriteriumsebene.

Eine Axe-Zuordnung bedeutet teilweise automatisierte Abdeckung, niemals, dass das vollständige Erfolgskriterium getestet wurde. get_wcag_checklist legt alle 55 Kriterien offen, die für WCAG 2.2 AA erforderlich sind, oder alle 86, die für WCAG 2.2 AAA erforderlich sind, einschließlich der manuellen Arbeit, die Automatisierung nicht abschließen kann.

Anforderungen

• Node.js 20 oder neuer

• Chrome oder Edge empfohlen

• Windows, macOS oder Linux

Der Server sucht zuerst nach installiertem Chrome/Edge. In unterstützten Linux-Umgebungen kann er auf das gebündelte @sparticuz/chromium zurückgreifen. Sie können A11Y_MCP_BROWSER_PATH auf eine explizite Browser-Executable setzen. Die Chromium-Sandbox bleibt standardmäßig aktiviert; setzen Sie A11Y_MCP_NO_SANDBOX=true nur für eingeschränkte Container oder Lambda-artige Laufzeiten, die Chrome andernfalls nicht starten können.

Installation unter Windows

Öffnen Sie PowerShell in dem Ordner, in dem Sie Projekte aufbewahren:

git clone https://github.com/aditya-ariosity/a11y-feedback-mcp.git
cd a11y-feedback-mcp
npm install
npm run build

Wenn das Repository noch nicht auf GitHub ist, laden Sie diesen Ordner zuerst herunter oder kopieren Sie ihn, und führen Sie dann die letzten drei Befehle darin aus.

Codex verbinden

Verwenden Sie in PowerShell den absoluten Pfad zum erstellten Einstiegspunkt:

codex mcp add a11y-feedback -- node "C:\full\path\to\a11y-feedback-mcp\dist\index.js"

Oder fügen Sie die entsprechende Konfiguration zu ~/.codex/config.toml hinzu:

[mcp_servers.a11y_feedback]
command = "node"
args = ["C:\\full\\path\\to\\a11y-feedback-mcp\\dist\\index.js"]
startup_timeout_sec = 30
tool_timeout_sec = 90

[mcp_servers.a11y_feedback.env]
A11Y_MCP_ALLOWED_ROOT = "C:\\full\\path\\to\\your-projects"

Starten Sie Codex neu und fragen Sie dann:

Prüfen Sie diese Seite bei 1440×900 und 390×844. Beheben Sie kritische und schwerwiegende Probleme, führen Sie beide Prüfungen erneut aus und listen Sie die verbleibenden manuellen Prüfungen auf.

Siehe docs/codex.md für Verifizierung und Fehlerbehebung.

Claude Code verbinden

claude mcp add --scope user a11y-feedback -- node "C:\full\path\to\a11y-feedback-mcp\dist\index.js"

Führen Sie claude mcp list aus, um die Verbindung zu bestätigen. Siehe docs/claude-code-and-design.md für den Claude-Design-Bridge-Workflow.

Entwicklung

npm install
npm run check
npm test
npm run test:e2e
npm run build

npm test deckt Farbmathematik, Netzwerkschutz, Behebung und den MCP-Vertrag ab. npm run test:e2e startet Chromium und prüft die absichtlich unzugängliche Testvorrichtung.

Starten Sie den lokalen Stdio-Server:

npm run dev

Starten Sie den optionalen Streamable-HTTP-Transport:

npm run build
npm run start:http

Der Endpunkt ist http://127.0.0.1:3000/mcp; der Health-Endpunkt ist http://127.0.0.1:3000/health. HTTP bindet standardmäßig an 127.0.0.1.

Umgebungsvariablen

Setzen Sie den Referenz-HTTP-Server nicht direkt dem öffentlichen Internet aus. Bringen Sie Authentifizierung, TLS, Ratenbegrenzungen, Begrenzungen der Anfragegröße und Mandantenisolation davor. Lesen Sie docs/security.md.

Aktueller Umfang

Das MVP deckt gerenderte Web-Oberflächen und deterministische Kontrastberechnungen ab. Es prüft noch keine nativen Mobile-Apps, PDFs, Canvas-Elemente, Videountertitel oder rohe Claude-Design-Pixel. Geplante Adapter können framework-bewusste Patches, Screenshot-/OCR-Unterstützung, Design-Token-Integration, CI-Anmerkungen und erstklassige Design-Canvas-Verbindungen hinzufügen, ohne den MCP-Vertrag zu ändern.

Projektdokumente

• Architektur und Produktspezifikation

• Codex-Einrichtung

• Einrichtung von Claude Code und Claude Design

• Sicherheitsmodell

• W3C-WAI-Abdeckungsmodell

• Skill für Begleitagenten

• Mitwirken

Lizenz

MIT