MCP-Zugänglichkeitsscanner 🔍

Name: MCP Accessibility Scanner
Author: JustasMonkev

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