Claude Code Plugin

Overzicht

De Axe Accessibility-plugin is Deque's toegankelijkheidstoolkit voor codeeragenten, geïnstalleerd en uitgevoerd vanaf Claude Code. De installatie ervan doet drie dingen tegelijk:

• Registreert de server. De plugin levert een kant-en-klare MCP-serverinvoer, zodat je niet zelf een .mcp.json hoeft te schrijven.
• Leert Claude hoe de tools te gebruiken. Een achtergrondvaardigheid laadt automatisch bij toegankelijkheidswerk, zodat Claude de analyse → herstel → verifieer cyclus volgt, remediate correct bundelt en velden tussen de tools zonder te raden in kaart brengt.
• Voegt drie slash-opdrachten toe voor installatie, het genereren van repository-niveau agentinstructies en het uitvoeren van de volledige herstelcyclus op een pagina.

De plugin is open source op github.com/dequelabs/axe-accessibility en is gelicentieerd onder MIT.

Het is niet alleen voor Claude Code

Claude Code is waar de plugin draait, maar twee van zijn commando's produceren output voor andere agenten en editors:

• /axe-accessibility:mcp-generate-instructions schrijft de analyse → herstel → verifieer workflow in .github/copilot-instructions.md, Cursor regels, of AGENTS.md net zo eenvoudig als in CLAUDE.md. Iedereen in het team die Copilot of Cursor gebruikt, erft de workflow van de repository, ongeacht of ze de plugin — of Claude Code — hebben geïnstalleerd.
• /axe-accessibility:mcp-setup kan de Axe MCP-server configureren voor Cursor, VS Code met Copilot, of Claude Desktop, niet alleen Claude Code.

Het is dus logisch om de plugin puur te installeren als een setup- en instructie-schrijftool voor een repository waarvan de bijdragers een mix van agenten gebruiken.

Vereisten

Om de plugin te installeren:

• Claude Code met pluginondersteuning.

Om scans uit te voeren — dat wil zeggen, om de analyze, igt en remediate tools te gebruiken, of dat nu vanuit Claude Code is of vanuit een andere client die de plugin heeft geconfigureerd:

• Een Axe DevTools voor Web abonnement dat toegang tot de Axe MCP-server omvat. Zonder deze toegang zullen de tools niet kunnen authenticeren.
• Eén runtime, afhankelijk van welke distributie je gebruikt:
  • npm (wat de plugin meelevert): Node.js 22.19.0 of later, plus een eenmalige installatie van Chromium. Zie Installeer Chromium — de server niet downloadt geen browser voor je, en het overslaan van deze stap is de meest voorkomende fout bij de eerste uitvoering.
  • Docker: Docker geïnstalleerd en draaiend. Chromium wordt binnen het image meegeleverd.
• Voor OAuth 2.0-authenticatie: een actieve Node.js LTS-release, aangezien de configuratie npx @deque/axe-auth aanroept.

Alleen de eerste is van toepassing als je de plugin uitsluitend installeert om /axe-accessibility:mcp-generate-instructions uit te voeren — om agentinstructiebestanden te schrijven heb je geen runtime of abonnement nodig.

Installatie

Voeg de Deque-marktplaats toe en installeer de plugin vanuit Claude Code:

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

Het eerste commando registreert de dequelabs/axe-accessibility repository als een plugin-marktplaats (de repository fungeert tevens als eigen marktplaats). Het tweede installeert de plugin ervan. Je hoeft de marktplaats maar één keer toe te voegen — latere installaties en updates kunnen die stap overslaan.

Herstart Claude Code wanneer hierom gevraagd wordt zodat de MCP-server wordt geladen.

Authenticatie

De meegeleverde serverconfiguratie van de plugin is auth-agnostisch: bij het opstarten probeert het een OAuth-toegangstoken te genereren en zorgt ervoor dat exact één referentie de server bereikt — het OAuth-token als je bent ingelogd, anders je AXE_API_KEY.

Kies de methode die je het beste bevalt:

• API-sleutel — maak er een aan in de Axe Account Portal onder API-sleutels → NIEUWE API-SLEUTEL TOEVOEGEN, waarbij je het Axe MCP Server product kiest. Exporteer het daarna in je shell zodat Claude Code het kan lezen:

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

  Voeg de regel toe aan je shell-profiel (~/.bashrc, ~/.zshrc, enz.) om het te behouden. Commit de sleutel nooit naar een bestand in je repository.

• OAuth 2.0 — log één keer in met de @deque/axe-auth CLI:

  npx -y @deque/axe-auth login

  Dit opent een browser voor de PKCE-flow en slaat tokens op in je OS-sleutelhanger, waarbij ze automatisch vernieuwd worden. Zie Authenticatie voor de volledige flow, sessiebeheer en platformondersteuning.

De meegeleverde configuratie handelt deze regel voor je af en moet harder werken dan een Docker-configuratie zou doen. Een container ontvangt alleen de variabelen die worden doorgegeven met expliciete -e-vlaggen, maar de npm-distributie erft je volledige shell-omgeving — dus een geëxporteerde AXE_API_KEY en een actieve OAuth-sessie zouden anders beide de server bereiken en het starten ervan verhinderen. De meegeleverde invoer wist eerst elke overgeërfde AXE_ACCESS_TOKEN en als het een vers token kan genereren, zet het AXE_API_KEY uit voordat het deze instelt. OAuth wint wanneer beide beschikbaar zijn.

Private cloud en on-premises implementaties

De npm-distributie erft AXE_SERVER_URL van je shell, dus het exporteren ervan naast je referentie is voldoende:

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

Als je OAuth gebruikt, geef dan ook dezelfde URL door bij het inloggen: npx -y @deque/axe-auth login --server https://your-axe-instance.example.com. Als AXE_SERVER_URL niet is ingesteld, valt de server terug op https://axe.deque.com (Deque's gedeelde US SaaS-instantie). Zie Configuratiereferentie.

Installatie verifiëren

1. Herstart Claude Code.

2. Voer /mcp uit en controleer of axe-mcp-server wordt vermeld en verbonden is, met de analyze-, igt-, en remediate-tools beschikbaar.

3. Voer een snelonderzoek uit op een bekende pagina:

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

Een succesvolle scan van een echte pagina levert een aanzienlijke payload op — tientallen kilobytes is normaal, geen fout. Als je client klaagt dat het resultaat te groot is, beperk dan de scan met de analyze's selector-parameter.

Als de server niet verbinding maakt, controleer dan je Node-versie, of Chromium is geïnstalleerd, en dat exact één referentie is ingesteld, en zie dan Probleemoplossing.

Wat is inbegrepen

De mcp-usagevaardigheid

Je roept deze nooit direct aan. Hij wordt automatisch geladen wanneer een taak toegankelijkheid, a11y, WCAG-naleving of het oplossen van toegankelijkheidsproblemen in web-UI omvat en hij geeft Claude de operationele kennis die anders handmatig in een CLAUDE.md moet worden geschreven:

• De workflow. Analyseer de pagina, corrigeer de schendingen en analyseer opnieuw om nul schendingen te verifiëren voordat het werk als voltooid wordt beschouwd.
• Veldmapping. Hoe elk probleem van analyze zich vertaalt naar de parameters van remediate — de meest voorkomende bron van fouten wanneer een agent de twee tools op gokwerk met elkaar verbindt. Het omvat de valkuilen: problemen komen aan onder de data-array van de respons, en een individueel probleem heeft een eigen remediation-veld dat een object van onbewerkte testgegevens is, niet de string die de remediate-parameter wil.
• Batchverwerking. remediate accepteert een issues array van 1–25 per oproep, elk met een door de oproeper bedachte id. Eén oproep per scan, niet één per probleem — een oproep per probleem wordt meteen afgewezen.
• Kredietbewustzijn. Credits worden verbruikt per probleem, niet per oproep, dus batchen is het contract in plaats van een korting. Het opnieuw uitvoeren van analyze om te verifiëren verbruikt niets, dus verificatie is goedkoop.
• Welke bevindingen te vertrouwen. Problemen die zijn gemarkeerd isAdvanced: true komen van Geavanceerde regels — AI en computervisie — en zijn probabilistisch, dus ze verdienen bevestiging tegen de echte UI. Standaard axe-core bevindingen (isAdvanced: false) zijn deterministisch en gezaghebbend.
• Toetsenbord testen. Wanneer naar igt te grijpen en hoe de probleemvorm verschilt van die van analyze.
• Regel-specifieke nuance. Richtlijnen voor regels die veel oordeelsvermogen vereisen, zoals image-alt, color-contrast, link-name/button-name en formulieretikettering.

Omdat de vaardigheid altijd beschikbaar is, werken verzoeken in gewone taal zonder formaliteit:

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

Commando's

/axe-accessibility:mcp-setup

/axe-accessibility:mcp-setup [client]

Loopt u door het verbinden van de Axe MCP-server heen, door te vragen naar de beslissingen in plaats van deze te veronderstellen. Optioneel kunt u een cliënt doorgeven — claude-code, cursor, vscode of claude-desktop — om die vraag over te slaan.

Het commando:

1. Vraagt of u de npm of Docker distributie wilt, en controleert vervolgens de runtime — Node-versie en Chromium voor npm, een draaiende daemon voor Docker.
2. Vraagt of u API-sleutel of OAuth 2.0 authenticatie wilt, en loopt u dan door het maken van een sleutel in het Account Portal heen of het draaien van de browser login.
3. Schrijft de overeenkomende configuratie voor uw cliënt — die in elke bestaande MCP-configuratie wordt samengevoegd in plaats van deze te overschrijven. Voor Claude Code op de npm-distributie maakt de ingebouwde server van de plugin deze stap meestal overbodig.
4. Biedt de optionele instellingen die het waard zijn om te kennen: AXE_SERVER_URL voor private cloud, AXE_ADVANCED_RULES voor een standaard geavanceerde regels, en AXE_CHROME_PATH om een browser die u al hebt opnieuw te gebruiken (alleen npm).
5. Verifieert de verbinding en voert een rooktest uit.

Nuttig, zelfs al registreert het installeren van de plugin de server al: voer het uit wanneer u voor de eerste keer authenticatie moet instellen, moet overschakelen naar Docker, moet wijzen naar een private cloud-instantie, of een anders editor op dezelfde machine moet configureren. De cliëntsnippets die het genereert zijn dezelfde als gedocumenteerd voor VS Code met Copilot, Cursor en Claude Code — de opdracht kiest gewoon de juiste en voegt deze voor u samen in uw bestaande configuratie.

/axe-accessibility:mcp-generate-instructions

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

Schrijft de verplichte analyseren → herstellen → verifiëren workflow in de agent-instructiebestanden van uw repository, zodat elke codeeragent die in de repo werkt — niet alleen degene die de plugin heeft geïnstalleerd — deze volgt. Doelwitten:

Zonder argument detecteert de opdracht welke van deze bestanden al bestaan en bevestigt de set met u voordat hij schrijft.

Elk bestand krijgt het volledige contract, niet slechts de lus: de remediate batchingregel, het veldtoewijzing, het onderscheid tussen deterministisch en geavanceerd vertrouwen, de igt toetsenbordsectie en de kredietnota. Toolnamen worden per doel aangepast, aangezien cliënten MCP-tools anders naamgeven — Copilot bindt bijvoorbeeld aan mcp_axe-mcp-server_analyze, terwijl Claude Code en Cursor gewone namen gebruiken.

Bestaande bestanden worden samengevoegd, niet overschreven: als er al een sectie met toegankelijkheidsworkflow aanwezig is, wordt deze op de plaats bijgewerkt, anders wordt de sectie toegevoegd en de rest van het bestand behouden. De opdracht past ook de instructies aan aan uw repository waar mogelijk — bijvoorbeeld door te verwijzen naar de daadwerkelijke dev-server URL en startcommando van uw project in plaats van naar een placeholder.

/axe-accessibility:mcp-generate-instructions all

Het genereren van all is de gebruikelijke keuze voor een gedeelde repository: één persoon voert het één keer uit vanuit Claude Code, commiteert de bestanden, en de agent van elke bijdrager neemt de workflow over — Copilot van .github/copilot-instructions.md, Cursor van .cursor/rules/accessibility.mdc, enzovoort. De instructies hebben alleen effect op agenten die ze lezen, en elke bijdrager moet nog steeds de Axe MCP-server aangesloten hebben in zijn eigen cliënt om de workflow daadwerkelijk te laten draaien.

Dit is het geautomatiseerde equivalent van de sjabloon in Uw AI-agent configureren.

/axe-accessibility:mcp-audit

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

Voert de volledige herstelcyclus uit op een pagina en past de oplossingen toe op uw broncode. Geef de volledige URL door inclusief schema en poort. Als u deze weglaat, probeert de opdracht een draaiende dev-server vanuit uw package.json scripts en gebruikelijke poorten te detecteren, en bevestigt de URL met u voordat hij scant.

Elke ronde:

1. Analyseer de URL en verzamel de problemen.
2. Triage ze per vlag — isAdvanced bevindingen worden bevestigd tegen de echte UI voordat er iets wordt gewijzigd, isNeedsReview bevindingen worden aan u gepresenteerd in plaats van automatisch te worden opgelost wanneer de oproep een ontwerpsbeslissing is, en isBestPractice bevindingen blokkeren nooit "clean".
3. Herstel elk probleem van de ronde in een enkele batchoproep (tot 25 per oproep, verdeeld in opeenvolgende batches daarbuiten).
4. Toepassen de richtlijnen voor uw broncode, waarbij elk resultaat wordt gecorreleerd aan id en de status wordt gecontroleerd, aangezien een batch gedeeltelijk kan mislukken. Voorgestelde code-oplossingen worden aangepast aan de echte component in plaats van letterlijk te worden gekopieerd.
5. Opnieuw analyseren om te verifiëren.

De lus stopt bij nul overtredingen of na max-rounds (standaard 5). Hij stopt ook vroeg als een ronde geen vooruitgang boekt — op dat punt hebben de resterende problemen meestal een ontwerpsbeslissing nodig, of zijn het geavanceerde-regel valse positieven, die de opdracht als zodanig rapporteert in plaats van uw code te vervormen om nul te bereiken. Vooruitgang wordt per ronde gerapporteerd (bijvoorbeeld, round 1: 7 → round 2: 2 → round 3: 0), en de opdracht vat de codewijzigingen samen die het heeft gemaakt zodat u deze kunt beoordelen voordat u ze commiteert.

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

Een pagina bereiken die geen gewone URL is, werkt zoals bij het onderliggende hulpmiddel: beschrijf een inlog- of interactie en de stappen worden doorgegeven als before acties; beschrijf omgevingsroutering of een vooraf geauthenticeerde sessie en ze worden doorgegeven als cookies, die van toepassing zijn voordat er genavigeerd wordt. Houd geheimen in fill stap's value of een cookie's value, nooit in een selector of een cookienaam.

Zodra automatische overtredingen schoon zijn, kan het commando een optionele toetsenbordpas uitvoeren met igt — focusvolgorde, focustrappen en zichtbaarheid van de focus zijn onzichtbaar voor een statische scan. Vraag er direct om als u het wilt gebruiken op een pagina met menu's, dialogen of aangepaste widgets:

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

Voorgesteld werkproces

1. /axe-accessibility:mcp-setup — verbind en authenticatie de server. Verifieer met /mcp.
2. /axe-accessibility:mcp-generate-instructions all — integreer de workflow in de repository zodat elke agent en teamgenoot hem overneemt.
3. /axe-accessibility:mcp-audit http://localhost:3000 — ruim de toegankelijkheidsschuld op die al op de pagina aanwezig is.
4. Vanaf dat moment, gewoon bouwen. De mcp-usage vaardigheid houdt Claude aan het werk in de cyclus van UI-wijzigingen zonder te hoeven vragen.

De plugin beheren

Het /plugin commando van Claude Code beheert de levenscyclus van de plugin:

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

Deïnstalleren verwijdert de meegeleverde MCP-serverinvoer samen met de vaardigheden en commando's. Eventuele agent-instructiebestanden die door /axe-accessibility:mcp-generate-instructions zijn geschreven, blijven in uw repository — verwijder ze zelf als u ze niet langer wilt.

Gerelateerde pagina's

• Een distributie kiezen — npm versus Docker, en Chromium installeren voor npm
• Setup in Claude Code — de server handmatig configureren, zonder de plugin
• Authenticatie — API-sleutel en OAuth 2.0 in zijn geheel
• Configuratiereferentie — omgevingsvariabelen en agent-instructie sjablonen
• Geavanceerde regels — presets, prioriteit en wat de isAdvanced vlag betekent
• Probleemoplossing — verbindings-, Chromium-, Docker- en authenticatiefouten
• AI-credits — hoe remediate en igt credits verbruiken