MCP-Server zum Testen der Web-Zugänglichkeit (A11y MCP)
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 Webseitetags(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