MCP-Zugänglichkeitsscanner 🔍

Ein Model Context Protocol (MCP)-Server, der automatisierte Web-Zugänglichkeitsprüfungen mit Playwright und Axe-core ermöglicht. Dieser Server ermöglicht LLMs die Durchführung von WCAG-Konformitätsprüfungen, die Aufnahme kommentierter Screenshots und die Erstellung detaillierter Zugänglichkeitsberichte.

Merkmale

✅ Vollständige WCAG 2.1/2.2-Konformitätsprüfung
🖼️ Automatische Screenshot-Erfassung mit Hervorhebung von Verstößen
📄 Detaillierte JSON-Berichte mit Anleitungen zur Behebung

Related MCP server: Cursor A11y MCP

Installation

Sie können das Paket mit einer der folgenden Methoden installieren:

Verwenden von npm:

npm install -g mcp-accessibility-scanner

Docker-Installation

Das Projekt enthält eine Docker-Datei, die alle erforderlichen Abhängigkeiten einschließlich Node.js v22 und Python 3.13 einrichtet.

Erstellen Sie das Docker-Image:

docker build -t mcp-server .

Führen Sie den Container aus:

docker run -it -e MCP_PROXY_DEBUG=true mcp-server

Sie können es auch im Hintergrund ausführen:

docker run -d -p 3000:3000 mcp-server

Installation in VS Code

Installieren Sie den Accessibility Scanner in VS Code mithilfe der VS Code CLI:

Für VS Code:

code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

Für VS Code Insider:

code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

Konfiguration

Hier ist die Claude Desktop-Konfiguration:

{
  "mcpServers": {
    "accessibility-scanner": {
      "command": "npx",
      "args": ["-y", "mcp-accessibility-scanner"]
    }
  }
}

Verwendung

Der Scanner stellt ein einzelnes Tool scan_accessibility bereit, das Folgendes akzeptiert:

url : Die zu scannende URL der Webseite (erforderlich)
violationsTag : Array von Tags zur Barrierefreiheitsverletzung, die überprüft werden sollen (erforderlich)
viewport : Optionales Objekt zum Anpassen der Ansichtsfenstergröße
- width : Zahl (Standard: 1920)
- height : Zahl (Standard: 1080)
shouldRunInHeadless : Optionaler Boolescher Wert zur Steuerung des Headless-Modus (Standard: true)

Hinweis: Beim Ausführen eines Scans wird automatisch ein kommentierter Screenshot, der etwaige Verstöße gegen die Barrierefreiheit hervorhebt, in Ihrem Download-Ordner gespeichert.

Beispielverwendung in Claude:

Could you scan example.com for accessibility issues related to color contrast?

Erweitertes Beispiel mit benutzerdefinierten Optionen:

Could you scan example.com for accessibility issues with a viewport of 1280x720 and show the browser window?

Entwicklung

Klonen und richten Sie das Projekt ein:

git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install

Starten Sie den TypeScript-Compiler im Überwachungsmodus:

npm run watch

Testen Sie den MCP-Server lokal:

npm run inspector

Docker-Entwicklung

Für die Entwicklung mit Docker:

Erstellen Sie das Entwicklungsimage:

docker build -t mcp-server-dev .

Ausführen mit Volume-Mounting für Live-Codeänderungen:

docker run -it -v $(pwd):/app -p 3000:3000 -e MCP_PROXY_DEBUG=true mcp-server-dev

Projektstruktur

├── src/              # Source code
│   ├── index.ts     # MCP server setup and tool definitions
│   └── scanner.ts   # Core scanning functionality
├── build/           # Compiled JavaScript output
├── Dockerfile       # Docker configuration for containerized setup
├── package.json     # Project configuration and dependencies
└── tsconfig.json    # TypeScript configuration