Accessibility MCP für KI-Agenten – WCAG automatisch prüfen
Lass Cursor, Claude Code und VS Code Web-Barrierefreiheit direkt in der IDE scannen und beheben – WCAG 2.1 Level AA konform, ohne Kontextwechsel und ohne manuelle Audits.
Funktioniert mit Cursor, VS Code & Claude Code
Barrierefreiheit ist komplex. Fristen zu verpassen ist teuer.
Seit Juni 2025 verlangt das Barrierefreiheitsstärkungsgesetz (BFSG), dass digitale Dienste WCAG 2.1 Level AA erfüllen — mit Bußgeldern bis zu 100.000 € bei Nichteinhaltung. Der European Accessibility Act erweitert ähnliche Anforderungen auf die gesamte EU.
Manuelle Audits sind langsam, teuer und kommen zu spät. Wenn Ihr Team Probleme erst in der Produktion findet, haben sich die Kosten für die Behebung vervielfacht.
Was wäre, wenn Ihre Entwickler Barrierefreiheitsprobleme beim Programmieren erkennen und beheben könnten?
Drei Schritte zu barrierefreiem Code
Ihr Agent scannt die Seite in einem echten Browser
Der KI-Agent öffnet Ihre localhost-Seite in headless Chromium, führt axe-core gegen WCAG 2.1 Level A + AA Regeln aus und liefert einen strukturierten Bericht — direkt in Ihrer IDE.
"Scanne http://localhost:3000 auf Barrierefreiheitsprobleme"Ein priorisierter Fix-Plan wird automatisch generiert
Verstöße werden WCAG-Erfolgskriterien und EN 301 549-Klauseln zugeordnet, nach Schweregrad sortiert (kritisch → gering) und in eine strukturierte Plan-Datei geschrieben.
→ 3 kritisch · 5 ernst · 2 moderat
→ .navable-plan.json im ProjektverzeichnisIhr Agent wendet Fixes mit bewährten Code-Patterns an
Der Agent arbeitet jedes Element ab, lädt den passenden Fix-Guide, wendet die Code-Änderung an und markiert sie als erledigt. Re-Scan zur Verifizierung.
✓ fix-1 image-alt erledigt
✓ fix-2 color-contrast erledigt
✓ fix-3 label erledigt
○ fix-4 heading-order ausstehendZwei Tools. Ein Workflow.
Der MCP-Server liefert die Scan-Engine. Die Agent Skills liefern strukturierte Schritt-für-Schritt-Anleitungen. Zusammen folgt Ihr KI-Agent einem deterministischen, wiederholbaren Workflow — keine Improvisation.
@navable/mcpDie Engine hinter automatisiertem Barrierefreiheits-Scanning. Verbindet Ihren KI-Coding-Agenten mit einem echten Chromium-Browser, der axe-core ausführt — dem Industriestandard für Barrierefreiheitstests. Neu in v0.2: optionales Dual-Engine-Scanning mit Pa11y/HTMLCS für kreuzbestätigte Befunde.
- Scannt jede localhost-URL in einem echten Browser (Playwright + axe-core)
- Optionales Dual-Engine-Scanning mit Pa11y/HTMLCS (v0.2) — kreuzbestätigte Befunde für Audit-Grade-Konfidenz
- Liefert WCAG 2.1 Level A + AA Verstöße mit Schweregrad, betroffenen Elementen und Fix-Hinweisen
- Ordnet Auffälligkeiten den jeweiligen EN 301 549-Klauseln zu (EU/BFSG-Konformität)
- Generiert strukturierte Fix-Pläne, die Ihr Agent schrittweise abarbeiten kann
- Verfolgt den Fix-Fortschritt — Elemente als erledigt, übersprungen oder in Bearbeitung markieren
- Enthält 8 integrierte Referenzressourcen: WCAG-Mapping, ARIA-Patterns, Semantisches HTML, Fix-Patterns
Funktioniert mit:
Ohne Skills improvisiert Ihr Agent. Mit ihnen folgt er einem strukturierten, wiederholbaren Playbook: Scannen → Planen → Beheben → Verifizieren. Einfach ins Projekt einfügen und jeder Barrierefreiheits-Workflow läuft jedes Mal gleich ab.
Scan & Fix
Scannt eine URL → generiert einen Fix-Plan → wendet Code-Fixes an → verifiziert mit Re-Scan
Fix Plan Executor
Setzt einen bestehenden Fix-Plan fort und arbeitet verbleibende Elemente ab
Component Review
Prüft Quellcode auf Barrierefreiheitsprobleme — kein Browser nötig, perfekt für PR-Reviews
Page Structure Audit
Prüft Landmarks, Überschriftenhierarchie, Navigationspatterns und Dokument-Metadaten
10 Fix-Guides enthalten:
Bilder, Formulare, Farbe & Kontrast, Navigation, Überschriften, Landmarks, ARIA, Tastatur, Sprache, Tabellen
Funktioniert mit:
Integriertes Barrierefreiheits-Wissen
Ihr Agent rät nicht — er referenziert Industriestandards, die bei Bedarf geladen werden, um Antworten schnell und präzise zu halten.
Alle 50 Level A + AA Erfolgskriterien den EN 301 549-Klauseln zugeordnet, mit Testbarkeitsklassifikation und axe-core Rule-IDs.
25 WAI-ARIA Widget-Patterns aus dem W3C APG — Rollen, Attribute, Tastaturinteraktionen, Fokusmanagement und häufige Fehler.
Referenz der HTML-Elemente mit impliziten ARIA-Rollen, korrekten Verwendungsmustern und den häufigsten Entwicklerfehlern.
55 axe-core-Regeln mit konkreten Vorher/Nachher-Codebeispielen, Framework-Hinweisen für React und Vue sowie WCAG-Kriterien-Referenzen.
Entwickelt für BFSG & European Accessibility Act Konformität
Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit Juni 2025. E-Commerce, Banking, Transport und digitale Dienste müssen WCAG 2.1 Level AA erfüllen — gestützt durch den harmonisierten Standard EN 301 549.
navable-Tools ordnen Scan-Befunde den jeweiligen EN 301 549-Klauseln zu, sodass sich Ihre Konformitätsdokumentation automatisch schreibt, während Ihre Entwickler Probleme beheben.
- WCAG 2.1 Level A + AA (50 Erfolgskriterien)
- EN 301 549 v3.2.1 Klausel-Mapping
- BFSG-Abdeckung (E-Commerce, Banking, Transport, Medien)
- Automatisierte + semi-automatisierte Testbarkeitsklassifikation
- Fix-Tracking mit Zeitstempeln für Audit-Trail
- WCAG 2.2 zukunftsgerichtete Empfehlungen enthalten
In unter 2 Minuten loslegen
Fügen Sie eine Konfigurationsdatei zu Ihrem Projekt hinzu. Der MCP-Server installiert sich automatisch via npx. Chromium wird beim ersten Start heruntergeladen. Keine API-Keys. Keine Accounts. Für immer kostenlos.
.vscode/mcp.json erstellen:
{
"servers": {
"navable": {
"command": "npx",
"args": ["-y", "@navable/mcp"]
}
}
}Nach dem Setup fragen Sie Ihren Agenten:
"Scanne http://localhost:3000 auf Barrierefreiheitsprobleme"Das war's. Der Agent erledigt den Rest.
Demo: Scannen, Planen & Beheben in unter 2 Minuten
Ein echter Scan einer Localhost-Seite — vom Prompt zum priorisierten Fix-Plan.
Häufig gestellte Fragen
Liefern Sie noch heute barrierefreie Produkte
Kostenlos. Open Source. In 2 Minuten eingerichtet. Keine Ausreden.