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, ganz ohne Kontextwechsel.
Funktioniert mit Cursor, VS Code & Claude Code
Barrierefreiheit ist wichtig. Und einfacher als gedacht.
Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Dienste in Deutschland. Die Anforderungen orientieren sich an der WCAG 2.1 Level AA. Mit den richtigen Tools lässt sich das Thema ganz entspannt und Schritt für Schritt angehen.
Traditionelle manuelle Audits erfordern viel Aufwand. Wenn Dein Team Barrieren schon während des Entwickelns findet, spart das Zeit und schont das Budget.
Was wäre, wenn Dein Team Barrierefreiheitsprobleme direkt beim Programmieren erkennen und beheben könnte?
Drei einfache Schritte zu barrierefreiem Code
Dein Agent scannt die Seite in einem echten Browser
Dein KI-Agent öffnet Deine localhost-Seite in headless Chromium, führt axe-core gegen die WCAG 2.1 Level A + AA Regeln aus und liefert Dir einen übersichtlichen Bericht – direkt in Deiner IDE.
"Scanne http://localhost:3000 auf Barrierefreiheitsprobleme"Ein priorisierter Fix-Plan wird automatisch generiert
Barrieren werden den WCAG-Erfolgskriterien und EN 301 549-Klauseln zugeordnet, nach Schweregrad sortiert und in eine übersichtliche Plan-Datei geschrieben.
→ 3 kritisch · 5 ernst · 2 moderat
→ .navable-plan.json im ProjektverzeichnisDein 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. Ein kurzer Re-Scan verifiziert das Ergebnis.
✓ 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 bieten strukturierte Schritt-für-Schritt-Anleitungen. So folgt Dein KI-Agent einem klaren, wiederholbaren Workflow.
@navable/mcpDie Engine hinter dem automatisierten Barrierefreiheits-Scanning. Verbindet Deinen KI-Coding-Agenten mit einem echten Chromium-Browser, der axe-core ausführt – dem bewährten Standard für Barrierefreiheitstests. Neu in v0.2: optionales Dual-Engine-Scanning mit Pa11y/HTMLCS für noch präzisere Ergebnisse.
- 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 hohe 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 Dein 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:
Mit unseren Agent-Skills folgt Dein KI-Agent einem klaren Fahrplan: Scannen → Planen → Beheben → Verifizieren. Einfach ins Projekt einfügen und schon läuft Dein Barrierefreiheits-Workflow wie von selbst.
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
Dein Agent muss nicht raten – er greift direkt auf bewährte Web-Standards zu, damit die Behebungen schnell und präzise gelingen.
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, Tipps 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. So entsteht Deine Konformitätsdokumentation fast von selbst, während Dein Team Probleme behebt.
- 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üge einfach eine Konfigurationsdatei zu Deinem 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 fragst Du einfach Deinen 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
Entwickle noch heute barrierefreie Produkte
Kostenlos. Open Source. In 2 Minuten eingerichtet. Keine Ausreden.