a11y-mcp-server

MCP-Server für Barrierefreiheits-Audits, WCAG-Kriterien-Nachschlagefunktionen und Anleitungen zur Korrektur. Bereits veraltet.

Funktionen

• a11y_lookup_wcag: WCAG 2.2-Kriterien nach Nummer, Schlüsselwort oder Stufe nachschlagen

• a11y_check_pattern: HTML-Snippets auf häufige Barrierefreiheitsprobleme analysieren

• a11y_suggest_fix: Korrekturmuster mit Vorher/Nachher-Codebeispielen erhalten

• a11y_document_component: Barrierefreiheits-Dokumentation für über 18 UI-Komponententypen erstellen

• a11y_audit_summary: Professionelle Audit-Berichte aus einer Liste von Problemen erstellen

Related MCP server: ws-mcp

Lokale Entwicklung

# Install dependencies
npm install

# Build
npm run build

# Run locally
npm start

# Server runs on http://localhost:8080
# Health check: http://localhost:8080/health
# MCP endpoint: http://localhost:8080/mcp

NFSN-Bereitstellung

Voraussetzungen für meinen eigenen Pfad; Ihre Erfahrungen können abweichen:

1. NFSN-Konto mit Guthaben (~10 $ Ersteinzahlung)

2. SSH-Zugriff konfiguriert

Einrichtungsschritte

1. NFSN-Site erstellen

1. Im NFSN-Mitgliederbereich anmelden

2. Sites → Create a New Site

3. Site-Typ: Custom (erforderlich für Node.js-Daemon)

4. Notieren Sie Ihren Site-Hostnamen (z. B. yoursite.nfshost.com)

2. Code hochladen

# From project directory
rsync -avz --exclude node_modules --exclude .git --exclude dist \
 ./ USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net:/home/protected/a11y-mcp-server

3. SSH-Einrichtung

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net

# Navigate to project
cd /home/protected/a11y-mcp-server

# Check Node.js version (should be 18+)
node --version

# Install dependencies
npm install --production

# Build
npm run build

# Make run.sh executable
chmod +x run.sh

# Test locally
./run.sh
# Ctrl+C to stop

4. NFSN-Daemon konfigurieren

1. Zum NFSN-Site-Kontrollpanel gehen

2. Sites → Your Site → Site Information → Daemons

3. Daemon hinzufügen:

   • Tag: node

   • Command Line: /home/protected/a11y-mcp-server/run.sh

   • Working Directory: /home/protected/a11y-mcp-server

5. NFSN-Proxy konfigurieren

1. Sites → Your Site → Site Information → Proxies

2. Proxy hinzufügen:

   • Protocol: http

   • Base URI: /mcp

   • Document Root: (leer lassen)

   • Target Port: 8080

6. Bereitstellung überprüfen

# Check health endpoint
curl https://yoursite.nfshost.com/health

# Test MCP endpoint
curl -X POST https://yoursite.nfshost.com/mcp \
 -H "Content-Type: application/json" \
 -H "Accept: application/json, text/event-stream" \
 -d '{"jsonrpc":"2.0","method":"tools/list","id":1}'

Fehlerbehebung

Daemon-Logs prüfen:

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net
cat /home/protected/a11y-mcp-server/daemon.log

Daemon neu starten: Über das NFSN-Kontrollpanel: Sites → Daemons → Restart

Prüfen, ob der Daemon läuft:

ps aux | grep node

Claude Code-Konfiguration

Zu ~/.config/claude/claude_desktop_config.json hinzufügen:

{
 "mcpServers": {
 "a11y": {
 "url": "https://yoursite.nfshost.com/mcp"
 }
 }
}

Starten Sie anschließend Claude Code neu.

Lokales Testen mit Claude Code

Für Tests vor der NFSN-Bereitstellung starten Sie den Server lokal und konfigurieren Sie Claude Code für die Verbindung:

1. Server starten:

npm start

2. Zu ~/.config/claude/claude_desktop_config.json hinzufügen:

{
 "mcpServers": {
 "a11y-local": {
 "url": "http://localhost:8080/mcp"
 }
 }
}

3. Claude Code neu starten

Evaluierungsfragen

Verwenden Sie diese Fragen, um zu überprüfen, ob der Server korrekt funktioniert:

1. WCAG-Nachschlagen: "Welches WCAG-Kriterium deckt die Tastaturnavigation ab und welche Stufe hat es?"

   • Erwartet: Gibt 2.1.1 Tastatur (Stufe A) mit vollständigen Details zurück

2. Korrekturmuster: "Was ist das Korrekturmuster für fehlenden Alt-Text bei dekorativen Bildern?"

   • Erwartet: Gibt Muster mit Beispiel für leeres alt="" zurück

3. Komponentendokumentation: "Erstelle eine Barrierefreiheits-Dokumentation für eine modale Dialogkomponente."

   • Erwartet: Gibt Tastaturinteraktionen, ARIA-Attribute und Erwartungen an Screenreader zurück

4. WCAG 2.2-Suche: "Welche WCAG 2.2-Kriterien sind spezifisch für Mobil-/Touch-Interaktionen?"

   • Erwartet: Gibt 2.5.x Eingabemodalitäten-Kriterien zurück

5. Häufige Fehler: "Was sind die häufigen Fehler für Kriterium 1.4.3 Kontrast?"

   • Erwartet: Gibt F24, F83 Fehlertechniken zurück

Nutzungsbeispiele

WCAG-Kriterium nachschlagen

Query: "What WCAG criterion covers keyboard navigation?"
Tool: a11y_lookup_wcag
Args: { "query": "keyboard" }

HTML auf Probleme prüfen

Query: "Check this HTML for accessibility issues"
Tool: a11y_check_pattern
Args: { "html": "<img src='logo.png'><button><svg>...</svg></button>" }

Korrekturmuster abrufen

Query: "How do I fix missing alt text on decorative images?"
Tool: a11y_suggest_fix
Args: { "issueType": "missing-alt-decorative" }

Komponentendokumentation erstellen

Query: "Generate accessibility documentation for a modal dialog"
Tool: a11y_document_component
Args: { "componentType": "modal" }

WCAG-Daten aktualisieren

WCAG-Kriterien sind in src/data/wcag-criteria.json gebündelt. Zum Aktualisieren:

1. Die JSON-Datei mit neuen Kriterien bearbeiten

2. Neu erstellen: npm run build

3. Erneut auf NFSN bereitstellen

Lizenz

MIT

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers