Barrierefreiheit, nahtlos in Deinen Entwicklungs-Workflow integriert
Verbinde Barrierefreiheit direkt mit Deinen KI-Agenten
navable bietet Dir zwei praktische MCP-Server: Validiere lokalen Code direkt während der Entwicklung auf localhost oder frage Live-Audit-Daten ab, ohne Deinen Editor zu verlassen.
Local MCP – Localhost im Dev-Workflow validieren
Ermöglicht Deinen KI-Coding-Agenten tiefe Real-Browser-Scans über die axe-core Engine (optional Pa11y/HTMLCS). Der Server liefert WCAG 2.1 A+AA-Verstöße inklusive automatischem EN 301 549-Mapping und strukturiertem Fix-Plan.
- Tools: run_accessibility_scan, generate_fix_plan, update_fix_status
- Erzeugt eine .navable-plan.json, die Dein KI-Agent autonom abarbeitet
claude mcp add navable -- npx -y @navable/mcpHosted MCP – Globale Audit-Daten direkt in der IDE
Verbinde VS Code, Cursor oder Windsurf mit Deinen zentralen Produktions- und Staging-Audits. Frage Deine KI nach aktuellen Scores, Top-Issues und Trends der gesamten Organisation – ganz ohne Kontextwechsel.
- Überwachte URL-Sammlungen, Scores und Schweregrade direkt abfragen
- Sicherer Endpunkt über mcp.navable.io via x-api-key-Authentifizierung
https://mcp.navable.io/ (Header: x-api-key)Ein wiederholbarer scan → fix → verify-Workflow
Kombiniere den MCP mit @navable/skills, damit Dein Agent einem konsistenten Prozess folgt statt zu improvisieren — mit detaillierten Fix-Guides für ARIA, Farbe, Formulare, Überschriften, Bilder, Tastatur, Landmarks, Sprache, Navigation und Tabellen.
scan-accessibility
Eine URL scannen, Fix-Plan erstellen, Fixes anwenden und verifizieren.
fix-accessibility
Eine bestehende .navable-plan.json fortsetzen und offene Punkte abarbeiten.
review-component
Den Quellcode einer Komponente auf Barrierefreiheit prüfen — ganz ohne Browser.
audit-page-structure
Landmarks, Überschriften-Hierarchie, Navigation und Dokument-Metadaten prüfen.
In den Skills-Ordner Deines Agenten installieren
cp -r skills/* .github/skills/ # Copilot
cp -r skills/* .claude/skills/ # Claude Code
cp -r skills/* .agents/skills/ # CursorSichere jeden Deploy vollautomatisch auf Barrierefreiheit ab
Integriere WCAG-Checks direkt in Deine bestehende Bereitstellungs-Pipeline. Steuere Audits programmatisch, nutze automatisierte Qualitäts-Gates vor dem Release oder leite Echtzeit-Ergebnisse über Webhooks weiter.
- Automatisierte Trigger: Löse tiefe Real-Browser-Audits nach jedem Deploy aus
- Dynamisches URL-Management: Füge neue Pfade direkt aus Deinem Code hinzu
- Echtzeit-Schnittstellen mit sicherer Header-Authentifizierung.
- Webhook-Pipelines: Sende Audit-Events direkt an Deine internen Tools
curl -X POST https://app.navable.io/api/... \
-H "x-api-key: $navable_API_KEY"Jeder Befund kommt mit einem Fix-Prompt
Füge einen fertigen Prompt in Copilot, Cursor oder ChatGPT ein. Das Problem, der betroffene Code und die Fix-Anweisungen sind inklusive. Kein Barrierefreiheits-Wissen nötig.
Klicke hier, um ein echtes Beispiel zu sehen, das navable erzeugt.
Dein Agent erhält Expertenkontext statt Vermutungen
Der Open-Source-MCP stellt kuratierte, WCAG-fundierte Ressourcen bereit, damit Agenten Probleme gleich beim ersten Mal richtig beheben.
WCAG → EN-301-549-Mapping
Erfolgskriterien zu EN 301 549, Testbarkeit und axe-Regeln zugeordnet.
>50 Fix-Patterns
Vorher/Nachher-Code-Patterns pro axe-Regel, die Dein Agent anwenden kann.
WAI-ARIA-APG-Muster
Authoring-Practices-Leitfäden für Dialoge, Comboboxen und mehr.
Semantik-HTML-Guides
Implizite Rollen pro Element und korrekte Nutzung.
BFSG-Rechtskontext
Geltungsbereich, Glossar und Durchsetzungskontext für die deutsche Compliance.