MCP-Server für Web-Zugänglichkeit

Ein MCP-Server (Model Context Protocol), der mithilfe von Axe-Core und Puppeteer Funktionen zur Analyse der Webzugänglichkeit bereitstellt.

Merkmale

Analysieren Sie die Webzugänglichkeit beliebiger URLs mit axe-core
Simulieren Sie Farbenblindheit (Protanopie, Deuteranopie, Tritanopie) mithilfe von Farbmatrizen
Detaillierte Berichterstattung über Barrierefreiheitsverletzungen
Unterstützung für benutzerdefinierte Benutzeragenten und Selektoren
Debug-Protokollierung zur Fehlerbehebung
Umfassende Barrierefreiheitsprüfungen basierend auf den WCAG-Richtlinien

Voraussetzungen

Node.js (v14 oder höher)
npm

Installation

Installation über Smithery

So installieren Sie den Web Accessibility MCP Server für Claude Desktop automatisch über Smithery :

npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

Manuelle Installation

Klonen Sie das Repository:

git clone [repository-url]
cd mcp-web-a11y

Installieren Sie Abhängigkeiten:

npm install

Erstellen Sie den Server:

npm run build

Konfiguration

Fügen Sie den Server zu Ihrer MCP-Einstellungsdatei hinzu (normalerweise unter ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json ):

{
  "mcpServers": {
    "web-a11y": {
      "command": "node",
      "args": ["/path/to/mcp-web-a11y/build/index.js"],
      "disabled": false,
      "autoApprove": [],
      "env": {
        "MCP_OUTPUT_DIR": "/path/to/output/directory"
      }
    }
  }
}

Umgebungsvariablen

MCP_OUTPUT_DIR : Verzeichnis, in dem Screenshot-Ausgaben gespeichert werden
- Erforderlich für das Tool simulate_colorblind
- Wenn nicht angegeben, wird standardmäßig „./output“ relativ zum aktuellen Arbeitsverzeichnis verwendet.
- Muss ein absoluter Pfad sein, wenn in den MCP-Einstellungen konfiguriert

Verwendung

Der Server bietet zwei Tools: check_accessibility zur Analyse der Webzugänglichkeit und simulate_colorblind zur Simulation von Farbenblindheit.

Werkzeug: check_accessibility

Überprüft die Erreichbarkeit einer bestimmten URL mithilfe von Axe-Core.

Parameter

url (erforderlich): Die zu analysierende URL
waitForSelector (optional): CSS-Selektor, auf den vor der Analyse gewartet werden soll
userAgent (optional): Benutzerdefinierter User-Agent-String für die Anfrage

Beispielverwendung

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>check_accessibility</tool_name>
<arguments>
{
  "url": "https://example.com",
  "waitForSelector": ".main-content",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
</arguments>
</use_mcp_tool>

Werkzeug: simulate_colorblind

Simuliert mithilfe von Farbmatrixtransformationen, wie eine Webseite Benutzern mit unterschiedlichen Arten von Farbenblindheit angezeigt wird.

Arten der Farbenblindheit

Das Tool unterstützt drei Arten der Farbenblindheitssimulation:

Protanopie (Rotblindheit) – Verwendet Matrix:
0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758
Deuteranopie (Grünblindheit) – Verwendet Matrix:
0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7
Tritanopie (Blaublindheit) – Verwendet Matrix:
0.95, 0.05, 0 0, 0.433, 0.567 0, 0.475, 0.525

Parameter

url (erforderlich): Die zu erfassende URL
type (erforderlich): Zu simulierender Typ der Farbenblindheit („Protanopie“, „Deuteranopie“ oder „Tritanopie“)
outputPath (optional): Benutzerdefinierter Pfad für die Screenshot-Ausgabe
userAgent (optional): Benutzerdefinierter User-Agent-String für die Anfrage

Beispielverwendung

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>simulate_colorblind</tool_name>
<arguments>
{
  "url": "https://example.com",
  "type": "deuteranopia",
  "outputPath": "colorblind_simulation.png"
}
</arguments>
</use_mcp_tool>

Antwortformat

check_accessibility-Antwort

{
  "url": "analyzed-url",
  "timestamp": "ISO-timestamp",
  "violations": [
    {
      "impact": "serious|critical|moderate|minor",
      "description": "Description of the violation",
      "help": "Help text explaining the issue",
      "helpUrl": "URL to detailed documentation",
      "nodes": [
        {
          "html": "HTML of the affected element",
          "failureSummary": "Summary of what needs to be fixed"
        }
      ]
    }
  ],
  "passes": 42,
  "inapplicable": 45,
  "incomplete": 3
}

simulate_colorblind Antwort

{
  "url": "analyzed-url",
  "type": "colorblind-type",
  "outputPath": "path/to/screenshot.png",
  "timestamp": "ISO-timestamp",
  "message": "Screenshot saved with [type] simulation"
}

Fehlerbehandlung

Der Server umfasst eine umfassende Fehlerbehandlung für gängige Szenarien:

Netzwerkfehler
Ungültige URLs
Timeout-Probleme
Probleme mit der DNS-Auflösung

Fehlerantworten enthalten ausführliche Meldungen zur Unterstützung der Problemdiagnose.

Entwicklung

Projektstruktur

mcp-web-a11y/
├── src/
│   └── index.ts    # Main server implementation
├── build/          # Compiled JavaScript
├── output/         # Generated screenshots
├── package.json    # Project dependencies and scripts
└── tsconfig.json   # TypeScript configuration

Gebäude

npm run build

Dies wird:

Kompilieren Sie TypeScript in JavaScript
Machen Sie die Ausgabedatei ausführbar
Platzieren Sie die kompilierten Dateien im build Verzeichnis

Debuggen

Der Server verfügt über eine detaillierte Debug-Protokollierung, die in der Konsolenausgabe angezeigt wird. Dazu gehören:

Netzwerkanfragen und -antworten
Seitenladestatus
Selektor-Wartestatus
Alle Konsolenmeldungen von der analysierten Seite
Fortschritt der Farbsimulation

Häufige Probleme und Lösungen

Timeout-Fehler
- Erhöhen Sie den Timeout-Wert im Code
- Überprüfen der Netzwerkkonnektivität
- Überprüfen Sie, ob die URL zugänglich ist
DNS-Auflösungsfehler
- Überprüfen Sie, ob die URL korrekt ist
- Überprüfen der Netzwerkkonnektivität
- Versuchen Sie es mit der Subdomäne www
Selektor nicht gefunden
- Überprüfen Sie, ob der Selektor auf der Seite vorhanden ist.
- Warten Sie, bis der dynamische Inhalt geladen ist
- Überprüfen Sie die Seitenquelle auf den richtigen Selektor
Probleme mit der Farbsimulation
- Stellen Sie sicher, dass die Farben der Seite in einem unterstützten Format (RGB, RGBA oder HEX) angegeben sind.
- Prüfen Sie, ob die Seite dynamische Farbänderungen verwendet (möglicherweise ist zusätzliche Wartezeit erforderlich).
- Überprüfen Sie, ob das Screenshot-Ausgabeverzeichnis vorhanden und beschreibbar ist.

Beitragen

Forken Sie das Repository
Erstellen eines Feature-Zweigs
Übernehmen Sie Ihre Änderungen
Push zum Zweig
Erstellen einer Pull-Anforderung

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der Datei LICENSE .

Web Accessibility MCP Server

Integrations