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

Related MCP server: MCP Accessibility Scanner

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 :

Manuelle Installation

1. Klonen Sie das Repository:

2. Installieren Sie Abhängigkeiten:

3. Erstellen Sie den Server:

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 ):

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

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:

1. Protanopie (Rotblindheit) – Verwendet Matrix:

   0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758

2. Deuteranopie (Grünblindheit) – Verwendet Matrix:

   0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7

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

Antwortformat

check_accessibility-Antwort

simulate_colorblind Antwort

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

Gebäude

Dies wird:

1. Kompilieren Sie TypeScript in JavaScript

2. Machen Sie die Ausgabedatei ausführbar

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

1. Timeout-Fehler

   • Erhöhen Sie den Timeout-Wert im Code

   • Überprüfen der Netzwerkkonnektivität

   • Überprüfen Sie, ob die URL zugänglich ist

2. DNS-Auflösungsfehler

   • Überprüfen Sie, ob die URL korrekt ist

   • Überprüfen der Netzwerkkonnektivität

   • Versuchen Sie es mit der Subdomäne www

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

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

1. Forken Sie das Repository

2. Erstellen eines Feature-Zweigs

3. Übernehmen Sie Ihre Änderungen

4. Push zum Zweig

5. Erstellen einer Pull-Anforderung

Lizenz

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