Skip to main content
Glama
deenesjakoruzh
ronantakizawa

A11y MCP Server

by ronantakizawa
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Hybrid

MCP-Server zum Testen der Web-Zugänglichkeit (A11y MCP)

Schmiedeabzeichen

a11ymcpwide

A11y MCP ist ein MCP-Server (Model Context Protocol), der LLMs Zugriff auf APIs zum Testen der Barrierefreiheit im Web gewährt.

Dieser Server verwendet die Deque Axe-Core-API und Puppeteer, um LLMs die Analyse von Webinhalten auf WCAG-Konformität und die Identifizierung von Zugänglichkeitsproblemen zu ermöglichen.

HINWEIS: Dies ist kein offizieller MCP-Server von Deque Labs.

Geben Sie einen Stern, wenn Ihnen das Projekt gefallen hat! 🌟

Merkmale

  • Testen Sie Webseiten : Testen Sie jede öffentliche URL auf Zugänglichkeitsprobleme

  • HTML-Ausschnitte testen : Testen Sie reine HTML-Zeichenfolgen auf Barrierefreiheitsprobleme

  • WCAG-Konformitätsprüfung : Überprüfen Sie Inhalte anhand verschiedener WCAG-Standards (2.0, 2.1, 2.2).

  • Anpassbare Tests : Geben Sie an, welche Zugänglichkeits-Tags/Standards getestet werden sollen

  • Regelerkundung : Informieren Sie sich über verfügbare Zugänglichkeitsregeln

  • Farbkontrastanalyse : Überprüfen Sie Farbkombinationen auf WCAG-Konformität

  • ARIA-Validierung : Testen Sie die ordnungsgemäße Verwendung von ARIA-Attributen

  • Erkennung der Ausrichtungssperre : Identifizieren Sie Inhalte, die bestimmte Bildschirmausrichtungen erzwingen

Related MCP server: Web Accessibility MCP Server

Installation

Um diesen Server mit Claude Desktop zu verwenden, müssen Sie ihn in den MCP-Einstellungen konfigurieren:

Für macOS: Bearbeiten Sie die Datei unter '~/Library/Application Support/Claude/claude_desktop_config.json'

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

Für Windows: Bearbeiten Sie die Datei unter %APPDATA%\Claude\settings\claude_mcp_settings.json

Für Linux: Bearbeiten Sie die Datei unter ~/.config/Claude/settings/claude_mcp_settings.json Ersetzen Sie /path/to/axe-mcp-server/build/index.js durch den tatsächlichen Pfad zu Ihrer kompilierten Serverdatei.

Verfügbare Tools

Testzugänglichkeit

Testet eine URL auf Zugänglichkeitsprobleme.

Parameter:

  • url (erforderlich): Die URL der zu testenden Webseite

  • tags (optional): Array von WCAG-Tags zum Testen (z. B. ["wcag2aa"])

Beispiel

{
 "url": "https://example.com",
 "tags": ["wcag2aa"]
}

test_html_string

Testet einen HTML-String auf Barrierefreiheit. Parameter:

  • html (erforderlich): Der zu testende HTML-Inhalt

  • Tags (optional): Array von WCAG-Tags zum Testen (z. B. ["wcag2aa"])

Beispiel

{
  "html": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"]
}

Regeln abrufen

Erhalten Sie Informationen zu verfügbaren Barrierefreiheitsregeln mit optionaler Filterung.

Farbkontrast prüfen

Überprüfen Sie, ob eine Kombination aus Vordergrund- und Hintergrundfarbe den WCAG-Kontrastanforderungen entspricht.

Parameter:

  • foreground (erforderlich): Vordergrundfarbe im Hex-Format (z. B. „#000000“)

  • background (erforderlich): Hintergrundfarbe im Hex-Format (z. B. „#FFFFFF“)

  • fontSize (optional): Schriftgröße in Pixeln (Standard: 16)

  • isBold (optional): Ob der Text fett dargestellt wird (Standard: false)

Beispiel

{
  "foreground": "#777777",
  "background": "#EEEEEE",
  "fontSize": 16,
  "isBold": false
}

Farbkontrast prüfen

Überprüfen Sie, ob ARIA-Attribute in HTML korrekt verwendet werden.

Parameter:

  • html (erforderlich): HTML-Inhalt zum Testen der ARIA-Attributverwendung

Beispiel

{
  "html": "<div role='button' aria-pressed='false'>Click me</div>"
}

check_orientation_lock

Überprüfen Sie, ob der Inhalt eine bestimmte Ausrichtung erzwingt.

Parameter:

  • html (erforderlich): HTML-Inhalt zum Testen auf Probleme mit der Orientierungssperre

Beispiel

{
  "html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}

Antwortformat

Der Server gibt die Ergebnisse des Zugänglichkeitstests in einem strukturierten JSON-Format zurück:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
      "affectedNodes": [
        {
          "html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
          "target": ["div"],
          "failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
        }
      ]
    }
  ],
  "passes": 1,
  "incomplete": 0,
  "inapplicable": 2,
  "timestamp": "2025-04-25T16:45:33.655Z",
  "url": "about:blank",
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.3"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
    "windowWidth": 800,
    "windowHeight": 600,
    "orientationAngle": 0,
    "orientationType": "portrait-primary"
  }
}

Abhängigkeiten

  • @modelcontextprotocol/sdk

  • Puppenspieler

  • @axe-core/puppeteer

  • Axtkern

Install Server
A
license - permissive license
A
quality
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
17dResponse time
–Release cycle
–Releases (12mo)
Issues opened vs closed

Resources

Tools

Appeared in Searches

Latest Blog Posts

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/ronantakizawa/a11ymcp'

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