Skip to main content
Open Source & Kostenlos

Accessibility MCP Server für Cursor, Claude Code und VS Code

Prüfe Deine localhost-Seiten mit Playwright und axe-core. Erstelle einen Fix-Plan, bearbeite die Befunde in der IDE und scanne nach der Änderung erneut. Kostenlos und ohne navable-Konto.

Local MCP prüft die geladene Seite. Hosted MCP dient zum Abfragen Deiner Audit-Daten; es ist ein separates Produktangebot.

Standardmäßig laufen WCAG-2.1-A- und -AA-Regeln. In Version 0.2.0 kannst Du die axe-Regelauswahl um wcag22aa erweitern. Das ist keine vollständige WCAG-2.2-Prüfung.

Der lokale Scan enthält keine Login-Schritte, Banner-Klicks oder Dialog-Interaktionen. Plane solche Zustände gesondert und kontrolliere, was Dein Prüfpfad erreicht.

MCP einrichtenSo funktioniert's
WCAG 2.1 Level A + AA
EN 301 549 Mapping
Lokale Ausführung

Funktioniert mit Cursor, VS Code & Claude Code

Die Herausforderung

Barrieren während der Entwicklung untersuchen

Starte Deinen Dev-Server und prüfe die Seite, an der Du gerade arbeitest. Der Scan nennt Regeln, betroffene Elemente und technische Hinweise für Deinen nächsten Code-Review.

Ergänze den Scan durch Tastatur- und Screenreader-Tests. Ob Nutzer eine Aufgabe verstehen und abschließen können, lässt sich nicht allein aus Regelbefunden ableiten.

Prüfe nach jedem Fix denselben Seitenzustand erneut.

axe-coreStandard-Scan-Engine
.navable-plan.jsonBefunde und Bearbeitungsstand
localhostOhne navable-Konto prüfen
So funktioniert's

Scannen, planen und den Fix überprüfen

1. Scannen

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"
2. Planen

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.

generate_fix_plan({ scanId })
→ .navable-plan.json
3. Beheben und erneut prüfen

Dein Agent wendet Fixes mit bewährten Code-Patterns an

Prüfe den Vorschlag Deines Agenten, ändere den Quellcode und führe denselben Scan erneut aus. Ergänze manuelle Tests und markiere nur überprüfte Fixes als erledigt.

run_accessibility_scan({ url })
update_fix_status({ fixId, status: "done" })
Unsere Tools

Zwei 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.

Open Source
navable MCP Server
@navable/mcp

Der Local MCP verbindet Deinen Agenten mit Chromium und axe-core. Pa11y/HTMLCS kannst Du als zweite Engine zuschalten; gleiche die zusätzlichen Befunde ab.

  • 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 technische Befunde den dokumentierten EN-301-549-Klauseln zu
  • 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:

Cursor
VS Code (GitHub Copilot)
Claude Code
Jeder MCP-kompatible Client
Auf GitHub ansehennpm-Paket
Open Source
navable Agent Skills

Die Agent Skills geben Schritte für Scan, Fix-Plan, Codeänderung und erneute Prüfung vor. Dein Team prüft die Befunde und Änderungen.

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:

GitHub Copilot (.github/skills/)
Claude Code (.claude/skills/)
Cursor (.agents/skills/)
Auf GitHub ansehen
Integriertes Wissen

Integriertes Barrierefreiheits-Wissen

Lade den Fix-Guide für die betroffene Regel oder schlage das passende ARIA-Pattern nach. Prüfe, ob das Beispiel zu Deinem Code und Nutzerweg passt.

WCAG 2.1 Mapping

Alle 50 Level A + AA Erfolgskriterien den EN 301 549-Klauseln zugeordnet, mit Testbarkeitsklassifikation und axe-core Rule-IDs.

ARIA-Patterns

25 WAI-ARIA Widget-Patterns aus dem W3C APG — Rollen, Attribute, Tastaturinteraktionen, Fokusmanagement und häufige Fehler.

Semantisches HTML

Referenz der HTML-Elemente mit impliziten ARIA-Rollen, korrekten Verwendungsmustern und den häufigsten Entwicklerfehlern.

Fix-Patterns

55 axe-core-Regeln mit konkreten Vorher/Nachher-Codebeispielen, Tipps für React und Vue sowie WCAG-Kriterien-Referenzen.

Prüfgrenzen

Technische Befunde mit manuellen Tests ergänzen

Das WCAG- und EN-301-549-Mapping hilft Dir, Befunde einzuordnen. Es bedeutet nicht, dass alle Erfolgskriterien automatisch geprüft wurden oder Dein Angebot gesetzliche Anforderungen erfüllt.

Dokumentiere die getestete URL, den Zustand und die aktiven Regeln. Prüfe Fokuswege, Screenreader-Ausgaben und Inhalte zusätzlich manuell.

  • WCAG 2.1 A + AA als Standard-Regelauswahl
  • EN-301-549-Mapping als technische Referenz
  • Nur tatsächlich erreichte Seitenzustände geprüft
  • Manuelle Tests für Bedeutung und Bedienbarkeit
  • Fix-Vorschläge im Code-Review prüfen
  • Re-Scan nach jeder relevanten Änderung
Schnell-Setup

MCP mit Deiner IDE verbinden

Füge die Konfiguration hinzu und starte Deinen Dev-Server. npx lädt das Paket; beim ersten Scan kann ein Chromium-Download nötig sein. Du brauchst kein navable-Konto und keinen navable-API-Key.

.vscode/mcp.json erstellen:

{
  "servers": {
    "navable": {
      "command": "npx",
      "args": ["-y", "@navable/mcp"]
    }
  }
}

Optional: zusätzliche WCAG-2.2-AA-Regeln in .navable.json aktivieren

{
  "axeTags": [
    "wcag2a",
    "wcag21a",
    "wcag2aa",
    "wcag21aa",
    "wcag22aa"
  ]
}

Nach dem Setup fragst Du einfach Deinen Agenten:

"Scanne http://localhost:3000 auf Barrierefreiheitsprobleme"

Prüfe die Befunde und den vorgeschlagenen Fix, bevor Du ihn übernimmst.

Accessibility-MCP-Angebote vergleichen

Die Angaben zu anderen Anbietern stammen aus deren verlinkter Dokumentation. Es ist kein Leistungsvergleich aus eigenen Tests.

AngebotZugang und AusführungPrüfweg
navable Local MCPKostenlos, Open Source, ohne navable-Konto; lokaler Browser.axe-core; optional Pa11y/HTMLCS. Geladene Seite, strukturierter Fix-Plan.
Axe MCP ServerAxe-DevTools-Abonnement; Zugang über Deque-Vertrieb.Lokale und externe URLs; Login- und Banner-Schritte sowie geführte Tests laut Deque.
WebAbility MCPKostenlose lokale und gehostete Werkzeuge; anonyme Nutzung begrenzt. Einige Funktionen benötigen ein Konto.Mehrere Engines und Flow-Scans laut Anbieter. Einige Funktionen senden Daten an dessen API.
In Aktion sehen

Demo: Vom Scan zum Fix-Plan

Ein echter Scan einer Localhost-Seite — vom Prompt zum priorisierten Fix-Plan.

Häufig gestellte Fragen

Der Local MCP und die Agent Skills sind kostenlos und Open Source. Du brauchst dafür kein navable-Konto. Das Abfragen gehosteter Audit-Daten ist ein separates Angebot; prüfe dafür die aktuellen Produktinformationen.

Über die navable MCP-Tools werden gerenderte Seiten in einem echten Browser gescannt. Jedes Framework, das Seiten auf localhost bereitstellt, wird unterstützt – React, Next.js, Vue, Nuxt, Svelte, Angular, Astro, reines HTML und viele mehr.

Die Standardauswahl umfasst axe-Regeln mit WCAG-2.1-A- und -AA-Tags. Das Mapping ordnet Befunde EN 301 549 zu; es bestätigt keine vollständige Prüfung aller Kriterien. Den Stand der zusätzlichen WCAG-2.2-Regeln findest Du im Prüfhinweis auf dieser Seite.

Nein. Regelbasierte Scans finden maschinell bewertbare Fehler. Tastaturwege, verständliche Screenreader-Ausgaben und die Bedeutung von Inhalten brauchen ergänzende manuelle Prüfungen.

Der Local MCP führt den Browser und den Scan auf Deinem Rechner aus. Dein KI-Client verarbeitet Prompts und Tool-Ergebnisse nach seinen eigenen Einstellungen; je nach Anbieter können diese Daten an einen KI-Dienst gehen. Hosted MCP fragt dagegen Daten aus Deinem navable-Audit ab.

Cursor, VS Code mit GitHub Copilot und Claude Code. Jeder MCP-kompatible Client kann den Server nutzen.

Entwickle noch heute barrierefreie Produkte

Verbinde den lokalen Scanner mit Deiner IDE und prüfe Deinen nächsten Fix.

Auf GitHub ansehen