Skip to main content
Glama
deenesjakoruzh

Web Accessibility MCP Server

by bilhasry-deriv
GitHub
JavaScript
MIT License
4
  • Apple
  • Linux
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

MseeP.ai-Sicherheitsbewertungsabzeichen

MCP-Server für Web-Zugänglichkeit

Schmiedeabzeichen

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

  1. Klonen Sie das Repository:

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

  1. Installieren Sie Abhängigkeiten:

npm install

  1. 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:

  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

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

  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 .

Deploy Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

Bietet eine Web-Zugänglichkeitsanalyse und eine Farbenblindheitssimulation mithilfe von Axe-Core und Puppeteer und ermöglicht so detaillierte Zugänglichkeitsprüfungen und visuelle Simulationen basierend auf den WCAG-Richtlinien.

  1. Merkmale
    1. Voraussetzungen
      1. Installation
        1. Installation über Smithery
        2. Manuelle Installation
      2. Konfiguration
        1. Umgebungsvariablen
      3. Verwendung
        1. Werkzeug: check_accessibility
        2. Werkzeug: simulate_colorblind
        3. Antwortformat
        4. Fehlerbehandlung
      4. Entwicklung
        1. Projektstruktur
        2. Gebäude
        3. Debuggen
      5. Häufige Probleme und Lösungen
        1. Beitragen
          1. Lizenz

            Related Resources

            Related MCP Servers

            • Steel MCP Server

              steel-dev
              A
              security
              A
              license
              A
              quality
              Enables LLMs like Claude to navigate the web through Puppeteer-based tools and Steel. Based on the Web Voyager framework, it provides tools for all the standard web actions click clicking/scrolling/typing/etc and taking screenshots.
              Last updated -
              42
              MIT License
              • Apple

            • MCP Accessibility Scanner

              JustasMonkev
              A
              security
              A
              license
              A
              quality
              Enables automated web accessibility scans for WCAG compliance using Playwright and Axe-core, providing visual and JSON reports with remediation guidance.
              Last updated -
              25
              126
              17
              MIT License

            • Cursor A11y MCP

              westsideori
              A
              security
              A
              license
              A
              quality
              Provides accessibility testing capabilities through CLI, helping identify accessibility issues in web applications using axe-core and Puppeteer.
              Last updated -
              1
              1
              MIT License

            • a11y-mcp

              priyankark
              A
              security
              A
              license
              A
              quality
              An MCP (Model Context Protocol) server for performing accessibility audits on webpages using axe-core. Use the results in an agentic loop with your favorite AI assistants (Cline/Cursor/GH Copilot) and let them fix a11y issues for you!
              Last updated -
              2
              121
              27
              Mozilla Public License 2.0

            View all related MCP servers

            Appeared in Searches

            New MCP Servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/bilhasry-deriv/mcp-web-a11y'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server