Claude Code Plugin

Übersicht

Der Axe Accessibility-Plugin ist Deques Barrierefreiheits-Toolkit für Codierungsagenten, das von Claude Code installiert und ausgeführt wird. Die Installation bewirkt drei Dinge gleichzeitig:

• Registriert den Server. Das Plugin liefert einen fertigen MCP-Server-Eintrag, sodass Sie keinen .mcp.json von Hand schreiben müssen.
• Lehrt Claude, wie man die Tools verwendet. Eine Hintergrundfähigkeit lädt sich automatisch bei Arbeiten zur Barrierefreiheit, sodass Claude das Analyse → Beheben → Verifizieren-Schema befolgt, remediate korrekt stapelt und Felder zwischen den Tools ohne Raten zuordnet.
• Fügt drei Schrägstrich-Befehle hinzu für die Einrichtung, das Erzeugen von agentenebenen Anweisungen und das Ausführen des vollständigen Behebungslaufs auf einer Seite.

Das Plugin ist Open Source bei github.com/dequelabs/axe-accessibility und unterliegt der MIT-Lizenz.

Es ist nicht nur für Claude Code

Claude Code ist, wo das Plugin läuft, aber zwei seiner Befehle erzeugen Ausgaben für andere Agenten und Editoren:

• /axe-accessibility:mcp-generate-instructions schreibt den Analyse → Beheben → Verifizieren Arbeitsablauf so leicht in .github/copilot-instructions.md, Cursor-Regeln, oder AGENTS.md wie in CLAUDE.md. Jeder im Team, der Copilot oder Cursor verwendet, übernimmt den Arbeitsablauf aus dem Repository, ob sie das Plugin — oder Claude Code — installiert haben oder nicht.
• /axe-accessibility:mcp-setup kann den Axe MCP-Server für Cursor, VS Code mit Copilot oder Claude Desktop konfigurieren, nicht nur Claude Code.

Es ist daher sinnvoll, das Plugin als reines Setup- und Anweisungswerkzeug für ein Repository zu installieren, dessen Mitwirkende eine Mischung von Agenten verwenden.

Voraussetzungen

Um das Plugin zu installieren:

• Claude Code mit Plugin-Unterstützung.

Um Scans durchzuführen — das heißt, um die analyze, igt und remediate Tools zu verwenden, sei es von Claude Code oder von einem anderen Client, den das Plugin konfiguriert hat:

• Ein Axe DevTools für Web-Abonnement, das Zugang zum Axe MCP Server beinhaltet. Ohne dies werden die Tools nicht authentifizieren können.
• Eine Laufzeitumgebung, je nachdem, welche Verteilung Sie verwenden:
  • npm (was das Plugin liefert): Node.js 22.19.0 oder höher, plus eine einmalige Chromium-Installation. Siehe Chromium installieren — der Server nicht lädt keinen Browser für Sie herunter, und das Überspringen dieses Schritts ist der häufigste Erstlauffehler.
  • Docker: Docker installiert und läuft. Chromium wird innerhalb des Images geliefert.
• Für OAuth 2.0-Authentifizierung: ein aktive Node.js LTS-Version, da die Konfiguration npx @deque/axe-auth aufruft.

Nur der erste Punkt gilt, wenn Sie das Plugin ausschließlich installieren, um /axe-accessibility:mcp-generate-instructions auszuführen — zum Schreiben von Anweisungsdateien für Agenten benötigen Sie weder eine Laufzeitumgebung noch ein Abonnement.

Installation

Fügen Sie Deques Marktplatz hinzu und installieren Sie das Plugin innerhalb von Claude Code:

/plugin marketplace add dequelabs/axe-accessibility
/plugin install axe-accessibility

Der erste Befehl registriert das dequelabs/axe-accessibility-Repository als Plugin-Marktplatz (das Repository dient gleichzeitig als eigener Marktplatz). Der zweite installiert das Plugin daraus. Sie müssen den Marktplatz nur einmal hinzufügen – spätere Installationen und Updates können diesen Schritt überspringen.

Starten Sie Claude Code neu, wenn Sie dazu aufgefordert werden, damit der MCP-Server geladen wird.

Authentifizierung

Die mitgelieferte Serverkonfiguration des Plugins ist auth-agnostisch: Beim Start versucht sie, ein OAuth-Zugriffstoken zu erstellen und stellt sicher, dass genau eine Anmeldedaten den Server erreichen — das OAuth-Token, wenn Sie eingeloggt sind, ansonsten Ihre AXE_API_KEY.

Wählen Sie die Methode, die Ihnen am besten passt:

• API-Schlüssel — erstellen Sie einen im Axe-Konto-Portal unter API-Schlüssel → NEUEN API-SCHLÜSSEL HINZUFÜGEN und wählen Sie das Axe MCP-Server-Produkt. Exportieren Sie ihn dann in Ihrer Shell, damit Claude Code ihn lesen kann:

  export AXE_API_KEY="your-api-key-here"

  Fügen Sie die Zeile Ihrem Shell-Profil hinzu (~/.bashrc, ~/.zshrc usw.), um sie zu speichern. Niemals den Schlüssel in eine Datei in Ihrem Repository eintragen.

• OAuth 2.0 — melden Sie sich einmal mit der @deque/axe-auth CLI an:

  npx -y @deque/axe-auth login

  Dies öffnet einen Browser für den PKCE-Flow und speichert Tokens in Ihrem OS-Schlüsselbund, wobei sie automatisch aktualisiert werden. Siehe Authentifizierung für den vollständigen Ablauf, Sitzungsmanagement und Plattformunterstützung.

Die mitgelieferte Konfiguration übernimmt diese Regel für Sie und muss härter arbeiten als eine Docker-Konfiguration. Ein Container erhält nur die Variablen, die mit expliziten -e-Flags übergeben werden, aber die npm-Distribution erbt Ihre gesamte Shell-Umgebung — sodass ein exportierter AXE_API_KEY und eine aktive OAuth-Sitzung andernfalls beide den Server erreichen und ihn am Start hindern würden. Der mitgelieferte Eintrag löscht zuerst jegliche geerbten AXE_ACCESS_TOKEN, und wenn er ein frisches Token erstellen kann, setzt er AXE_API_KEY, bevor er es festlegt. OAuth gewinnt, wenn beide verfügbar sind.

Private Cloud- und On-Premises-Implementierungen

Die npm-Distribution übernimmt AXE_SERVER_URL aus Ihrer Shell, daher reicht es aus, sie zusammen mit Ihrem Anmeldedaten zu exportieren:

export AXE_SERVER_URL="https://your-axe-instance.example.com"

Wenn Sie OAuth verwenden, geben Sie auch dieselbe URL beim Anmelden an: npx -y @deque/axe-auth login --server https://your-axe-instance.example.com. Wenn AXE_SERVER_URL nicht gesetzt ist, verwendet der Server standardmäßig https://axe.deque.com (Deque's gemeinsame US-SaaS-Instanz). Siehe Konfigurationsreferenz.

Installation überprüfen

1. Starten Sie Claude Code neu.

2. Führen Sie /mcp aus und bestätigen Sie, dass axe-mcp-server aufgelistet und verbunden ist, mit den verfügbaren analyze-, igt- und remediate-Werkzeugen.

3. Führen Sie einen Schnellscan gegen eine bekannte Seite aus:

   Analyze https://dequeuniversity.com/demo/mars for accessibility issues

Ein erfolgreicher Scan einer echten Seite liefert eine beträchtliche Nutzlast — Zehn Kilobyte sind normal, kein Fehler. Wenn Ihr Client angibt, dass das Ergebnis zu groß ist, grenzen Sie den Scan mit dem analyze-Parameter von selector ein.

Wenn der Server keine Verbindung herstellt, überprüfen Sie Ihre Node-Version, ob Chromium installiert ist und dass genau eine Anmeldedaten eingestellt ist, und sehen Sie dann Fehlerbehebung.

Was ist enthalten

Die mcp-usage-Fähigkeit

Sie rufen diese nicht direkt auf. Sie lädt automatisch, wann immer eine Aufgabe Barrierefreiheit, a11y, WCAG-Konformität oder das Beheben von Zugänglichkeitsproblemen in Web-Benutzeroberflächen beinhaltet, und sie gibt Claude das betriebliche Wissen, das sonst in einer CLAUDE.md handschriftlich eingetragen werden müsste:

• Der Workflow. Analysieren Sie die Seite, beheben Sie die Verstöße und analysieren Sie dann erneut, um Null-Verstöße zu verifizieren, bevor Sie die Arbeit als abgeschlossen betrachten.
• Feldzuordnung. Wie jedes Problem von analyze auf die Parameter von remediate abbildet — die häufigste Fehlerquelle, wenn ein Agent die beiden Werkzeuge durch Raten verbindet. Es umfasst die Fallen: Probleme kommen unter dem data-Array der Antwort an, und das eigene remediation-Feld eines Problems ist ein Objekt mit rohen Prüfdaten, nicht der String, den der remediate-Parameter erwartet.
• Batching. remediate nimmt ein issues-Array von 1–25 pro Aufruf, jeder mit einem vom Anrufer erfundenen id. Ein Anruf pro Scan, nicht einer pro Problem — ein pro-Problem-Anruf wird sofort abgelehnt.
• Kreditbewusstsein. Gutschriften werden pro Problem verbraucht, nicht pro Anruf, sodass Batching der Vertrag anstelle eines Rabatts ist. Das erneute Ausführen von analyze zur Verifizierung verbraucht keine, daher ist die Verifizierung günstig.
• Welche Ergebnisse zu vertrauen sind. Markierte Probleme isAdvanced: true stammen aus Erweiterte Regeln — KI und Computer Vision — und sind probabilistisch, daher sollten sie gegen die tatsächliche Benutzeroberfläche bestätigt werden. Standardmäßige axe-core-Ergebnisse (isAdvanced: false) sind deterministisch und maßgeblich.
• Tastaturprüfung. Wann man zu igt greift und wie sich seine Problemstruktur von der von analyze unterscheidet.
• Regelspezifische Nuancen. Anleitung für urteilsintensive Regeln wie image-alt, color-contrast, link-name/button-name und Formbeschriftung.

Da die Fähigkeit immer verfügbar ist, funktionieren Anfragen in einfacher Sprache ohne Zeremonie:

Make the checkout page at http://localhost:3000/checkout accessible

Befehle

/axe-accessibility:mcp-setup

/axe-accessibility:mcp-setup [client]

Führt Sie durch den Anschluss an den Axe MCP Server und fragt nach den Entscheidungen, anstatt sie vorauszusetzen. Optional können Sie einen Client — claude-code, cursor, vscode oder claude-desktop — angeben, um diese Frage zu überspringen.

Der Befehl:

1. Fragt, ob Sie die npm oder Docker Verteilung möchten, und überprüft dann die Laufzeit — Node-Version und Chromium für npm, ein laufender Daemon für Docker.
2. Fragt, ob Sie API-Schlüssel oder OAuth 2.0-Authentifizierung möchten, und führt Sie dann durch das Erstellen eines Schlüssels im Account-Portal oder die Anmeldung im Browser.
3. Schreibt die passende Konfiguration für Ihren Client — durch Einfügen in eine bestehende MCP-Konfiguration anstatt sie zu überschreiben. Für Claude Code in der npm-Distribution macht in der Regel der mit dem Plugin gebündelte Server diesen Schritt überflüssig.
4. Bietet die optionalen Einstellungen an, die es sich lohnt zu kennen: AXE_SERVER_URL für private Cloud, AXE_ADVANCED_RULES für eine standhafte Standardregel für erweiterte Regeln und AXE_CHROME_PATH um einen bereits vorhandenen Browser wiederzuverwenden (nur npm).
5. Überprüft die Verbindung und führt einen Smoke-Scan durch.

Nützlich, obwohl das Installieren des Plugins den Server bereits registriert: Führen Sie es aus, wenn Sie die Authentifizierung zum ersten Mal einrichten, zu Docker wechseln, auf eine private Cloud-Instanz hinweisen oder einen anders-Editor auf derselben Maschine konfigurieren müssen. Die von ihm ausgegebenen Client-Snippets sind die gleichen, die für VS Code mit Copilot, Cursor und Claude Code dokumentiert sind — der Befehl wählt einfach das richtige aus und integriert es in Ihre bestehende Konfiguration.

/axe-accessibility:mcp-generate-instructions

/axe-accessibility:mcp-generate-instructions [targets]

Schreibt den obligatorischen Ablauf Analysieren → Beheben → Überprüfen in die Anleitungsdateien Ihres Repositorys, sodass jeder beliebig-Codierungsagent, der im Repository arbeitet — nicht nur derjenige, der das Plugin installiert hat — diesem folgt. Ziele:

Ohne Argument erkennt der Befehl, welche dieser Dateien bereits existieren, und bestätigt das Set mit Ihnen, bevor es geschrieben wird.

Jede Datei erhält den vollständigen Vertrag, nicht nur die Schleife: die remediate-Batching-Regel, die Feldzuordnung, die Unterscheidung zwischen deterministisch und erweitertes Vertrauen, den igt-Tastaturabschnitt und die Gutschriftenanmerkung. Tool-Namen werden je nach Ziel angepasst, da Clients MCP-Tools unterschiedlich benennen — Copilot bindet beispielsweise an mcp_axe-mcp-server_analyze, während Claude Code und Cursor einfache Namen verwenden.

Bestehende Dateien werden zusammengeführt, nicht überschrieben: Wenn ein barrierefreier Abschnitt des Workflows bereits vorhanden ist, wird dieser an Ort und Stelle aktualisiert, andernfalls wird der Abschnitt angehängt und der Rest der Datei bleibt erhalten. Der Befehl passt die Anweisungen auch dort an Ihr Repository an, wo es möglich ist — zum Beispiel durch Bezugnahme auf die reale Dev-Server-URL und den Startbefehl Ihres Projekts anstelle eines Platzhalters.

/axe-accessibility:mcp-generate-instructions all

Das Erzeugen von all ist die übliche Wahl für ein gemeinsames Repository: Eine Person führt es einmal von Claude Code aus, commitet die Dateien und der Workflow wird von jedem Beitragenden-Agenten übernommen — Copilot von .github/copilot-instructions.md, Cursor von .cursor/rules/accessibility.mdc, und so weiter. Die Anweisungen haben nur Wirkung für Agenten, die sie lesen, und jeder Beitragende muss den Axe MCP Server in seinem eigenen Client verbunden haben, damit der Workflow tatsächlich ausgeführt wird.

Dies ist das automatisierte Äquivalent der Vorlage in Ihren KI-Agent konfigurieren.

/axe-accessibility:mcp-audit

/axe-accessibility:mcp-audit <url> [max-rounds]

Führt den vollständigen Behebungszyklus auf einer Seite aus und wendet die Korrekturen auf Ihren Quellcode an. Geben Sie die vollständige URL inklusive Schema und Port an. Wenn Sie sie weglassen, versucht der Befehl, einen laufenden Entwicklungsserver aus Ihren package.json-Skripten und gängigen Ports zu erkennen, und bestätigt die URL mit Ihnen, bevor er den Scan durchführt.

Jede Runde:

1. Analysieren die URL und sammeln Sie die Probleme.
2. Einordnen sie nach Flagge — isAdvanced-Ergebnisse werden gegen die reale Benutzeroberfläche bestätigt, bevor etwas geändert wird, isNeedsReview-Ergebnisse werden Ihnen angezeigt, anstatt automatisch korrigiert zu werden, wenn es sich um eine Designentscheidung handelt, und isBestPractice-Ergebnisse blockieren niemals „sauber“.
3. Nachbessern alle Probleme der Runde in einem einzelner Batch-Anruf (bis zu 25 pro Anruf, aufgeteilt in aufeinanderfolgende Batches darüber hinaus).
4. Anwenden die Anleitung auf Ihren Quellcode, indem Sie jedes Ergebnis zurück nach id korrelieren und seinen Status überprüfen, da ein Batch teilweise fehlschlagen kann. Vorgeschlagene Codekorrekturen werden an die reale Komponente angepasst und nicht wortwörtlich eingefügt.
5. Erneut analysieren zur Verifizierung.

Der Zyklus stoppt bei null Verstößen oder nach max-rounds (Standard 5). Er stoppt auch frühzeitig, wenn eine Runde keinen Fortschritt erzielt – an diesem Punkt benötigen die verbleibenden Probleme typischerweise eine Designentscheidung oder sind falsch-positive Ergebnisse erweiterter Regeln, die der Befehl als solche meldet, anstatt Ihren Code so zu verdrehen, dass null erreicht wird. Der Fortschritt wird pro Runde berichtet (zum Beispiel, round 1: 7 → round 2: 2 → round 3: 0), und der Befehl fasst die vorgenommenen Codeänderungen zusammen, damit Sie sie vor dem Commit überprüfen können.

/axe-accessibility:mcp-audit http://localhost:3000/checkout 3

Das Erreichen einer Seite, die keine einfache URL ist, funktioniert wie beim zugrunde liegenden Tool: Beschreiben Sie einen Login oder eine Interaktion, und die Schritte werden als before Aktionen weitergegeben; beschreiben Sie die Umgebungseinstellung oder eine vorab authentifizierte Sitzung und sie werden als cookies weitergegeben, die vor der Navigation angewendet werden. Geheimnisse sollten in einem fill-Schritt's value oder im value eines Cookies aufbewahrt werden, niemals in einem Selektor oder einem Cookie-Namen.

Sobald automatisierte Verstöße bereinigt sind, kann der Befehl einen optionalen Tastaturpass mit igt durchführen — Fokusreihenfolge, Fokussperren und Fokus-Sichtbarkeit sind in einem statischen Scan nicht sichtbar. Fordern Sie es direkt an, wenn Sie es auf einer Seite mit Menüs, Dialogfeldern oder benutzerdefinierten Widgets wünschen:

/axe-accessibility:mcp-audit http://localhost:3000 and run the keyboard test

Vorgeschlagener Arbeitsablauf

1. /axe-accessibility:mcp-setup — verbinden und authentifizieren Sie den Server. Überprüfen Sie dies mit /mcp.
2. /axe-accessibility:mcp-generate-instructions all — integrieren Sie den Arbeitsablauf in das Repository, damit jeder Agent und Teamkollege ihn übernimmt.
3. /axe-accessibility:mcp-audit http://localhost:3000 — räumen Sie die bereits vorhandene Barrierefreiheitsschuld auf der Seite auf.
4. Ab dann einfach weiterbauen. Die mcp-usage-Fähigkeit hält Claude bei UI-Änderungen in der Schleife, ohne dass sie angefordert wird.

Verwaltung des Plugins

Der /plugin-Befehl von Claude Code verwaltet den Lebenszyklus des Plugins:

/plugin                 # browse and manage installed plugins
/plugin update axe-accessibility
/plugin uninstall axe-accessibility

Die Deinstallation entfernt den gebündelten MCP-Servereintrag zusammen mit den Fähigkeiten und Befehlen. Alle von /axe-accessibility:mcp-generate-instructions geschriebenen Agentenanweisungsdateien verbleiben in Ihrem Repository — entfernen Sie sie selbst, wenn Sie sie nicht mehr wünschen.

Verwandte Seiten

• Eine Distribution wählen — npm versus Docker und die Installation von Chromium für npm
• Einrichtung in Claude Code — den Server manuell konfigurieren, ohne das Plugin
• Authentifizierung — API-Key und OAuth 2.0 vollständig
• Konfigurationsreferenz — Umgebungsvariablen und Agentenanweisungsvorlagen
• Erweiterte Regeln — Voreinstellungen, Prioritäten und was der isAdvanced-Flag bedeutet
• Fehlerbehebung — Verbindungs-, Chromium-, Docker- und Authentifizierungsfehler
• KI-Guthaben — wie remediate und igt Guthaben verbrauchen