**axe MCP Server**

Overzicht

De axe MCP Server is een Model Context Protocol (MCP) server die toegankelijkheidstests van ondernemingskwaliteit rechtstreeks in uw ontwikkelworkflow integreert. Gebouwd op het vertrouwde axe-platform stelt het ontwikkelaars in staat om uitgebreide toegankelijkheidsscans uit te voeren en deskundige richtlijnen voor correcties te ontvangen zonder hun IDE te verlaten.

De server biedt drie mogelijkheden - analyze, remediate en igt.

Deze tools integreren naadloos met MCP-compatibele clients (zoals Claude Desktop, VS Code met Copilot of Cursor) en houden rekening met de configuratie-instellingen van je organisatie voor axe.

Toegang Krijgen

Axe MCP Server is opgenomen in het Axe DevTools for Web pakket. Een abonnement dat toegang tot de axe MCP Server mogelijk maakt, wordt opgezet in overleg met een Deque-vertegenwoordiger.

Tools & Mogelijkheden

De analyze Tool

De analyze tool voert een uitgebreide toegankelijkheidsanalyse uit op webpagina's door een scan uit te voeren via de axe DevTools Browser Extension in een echte browseromgeving. Het werkt naadloos met zowel lokale ontwikkelings-URL's (bijv. localhost:3000) als externe productie-URL's.

Wat Het Doet

1. Authenticatie - Valideert de gebruikersreferenties (ofwel een API-sleutel of een OAuth 2.0 toegangstoken) om geautoriseerde toegang te waarborgen
2. Configuratie Ophalen - Haalt de gebruikersspecifieke axe-configuratie instellingen op, inclusief:
   • Toegankelijkheidsteststandaard (bijv. WCAG 2.2 AA)
   • axe-core versie
   • Behoeft beoordeling / best practices
3. Browsergebaseerde Analyse - Start een browserinstantie op de achtergrond met de axe DevTools Extension geïnstalleerd
4. Paginanavigatie - Navigeert naar de door de gebruiker in hun prompt aan de AI-agent verstrekte URL
5. Toegankelijkheidsscan - Voert een volledige toegankelijkheidsanalyse uit op de gerenderde pagina met behulp van de axe DevTools Browser Extension, waardoor de daadwerkelijke gebruikerservaring wordt getest (niet alleen statische HTML)
6. Resultaatlevering - Geeft uitgebreide analyseresultaten terug aan de agent in een gestructureerd formaat

**Responsieve Testen**

De analyze tool ondersteunt optionele viewportWidth en viewportHeight parameters, waarmee u pagina's kunt testen op specifieke viewportafmetingen. Dit is handig om toegankelijkheidsproblemen te ontdekken die alleen bij bepaalde schermgroottes optreden, zoals mobiele of tablet breakpoints.

Analyze http://localhost:3000 for accessibility issues at a mobile viewport of 375x812

Wanneer deze parameters worden weggelaten, gebruikt de browser zijn standaard weergaveafmeting.

Gedeeltelijke Paginascans

Standaard scant de analyze tool de gehele pagina. Om de scan te beperken tot een specifiek deelgebied, geeft u de optionele selector parameter door — nuttig om te focussen op één component of om lawaaierige, ongerelateerde delen van de pagina uit de resultaten te houden.

• Een enkele CSS-selector string richt zich op een element in het bovenste frame:

  {
    "url": "http://localhost:3000",
    "selector": "#main"
  }

• Een array van CSS-selectors doorloopt iframe- of schaduw-DOM-grenzen — elk segment selecteert de host voor de volgende. Gebruik alleen een array wanneer de target zich binnen een iframe of shadow root bevindt:

  {
    "url": "http://localhost:3000",
    "selector": ["iframe#checkout", "#payment-form"]
  }

Een array ondersteunt maximaal 10 segmenten. Als de selector geen element op de pagina vindt, retourneert de scan een fout. Wanneer selector wordt weggelaten, wordt de hele pagina gescand.

Geef je AI-agent een instructie in natuurlijke taal — de agent vertaalt je intentie in de tooloproep:

Scan only the #main region of http://localhost:3000 for accessibility issues

Browserinteracties voor scannen

De analyze tool ondersteunt een optionele before array van interactiestappen die nadat de pagina wordt geladen maar voor de toegankelijkheidsscan uitvoeren. Dit ontsluit verschillende realistische testsituaties:

• Pagina's met inlogbeveiliging — vul inloggegevens in en dien in voordat de post-loginpagina wordt gescand
• Cookie-/toestemmingsbanners — sluit banners die anders inhoud van de pagina zouden bedekken of verbergen
• Dynamische inhoud — wacht tot door de client gegenereerde inhoud (routewijzigingen, laat geïnjecteerde DOM) verschijnt voordat u scant

Stappen worden in arrayvolgorde uitgevoerd, in de browsercontext als de scan, zodat cookies, localStorage en eventuele routewijzigingen veroorzaakt door click of fill voortduren in de scan.

De before array ondersteunt tot 20 stappen. Elke stap heeft een eigen tijdslimiet van BROWSER_TIMEOUT_MS (standaard 30000 ms); er is geen per-stap overschrijven.

Ondersteunde acties

Voorbeeld: Inloggen vóór het scannen

Geef je AI-agent een instructie in natuurlijke taal — de agent vertaalt je intentie in de tooloproep:

Analyze http://localhost:3000 for accessibility issues. Before running
the analysis, fill in the #username and #password fields with USERNAME
and PASSWORD from ./.env.local, click the button[type=submit] button,
and wait for #main-content to appear.

De agent verwerkt de prompt en roept de analyze tool aan met een payload vergelijkbaar met:

{
  "url": "http://localhost:3000",
  "before": [
    {
      "action": "fill",
      "selector": "#username",
      "value": "<resolved-from-.env.local>"
    },
    {
      "action": "fill",
      "selector": "#password",
      "value": "<resolved-from-.env.local>"
    },
    { "action": "click", "selector": "button[type=submit]" },
    { "action": "waitFor", "selector": "#main-content" }
  ]
}

Cookie-injectie

De analyze tool ondersteunt een optionele cookies array die cookies instelt in de browsercontext voor navigatie — zodat ze meegaan met het allereerste verzoek naar de pagina. Dit is anders dan before acties, die nadat na navigatie worden uitgevoerd en daarom geen invloed kunnen hebben op hoe het initiële verzoek wordt gerouteerd. Twee veelvoorkomende toepassingen:

• Omgevingsroutering — stel een staging- of feature-branch-selector-cookie in die een edge of CDN-laag leest om te beslissen welke versie van de site wordt geleverd.
• Vooraf geauthenticeerde sessies — injecteer een geldige sessiecookie zodat de scan al ingelogd begint, zonder een inlogformulier te gebruiken via before.

De cookies array ondersteunt tot wel 20 cookies.

Cookievelden

Voorbeeld: Landen op een vooraf geauthenticeerde pagina

Geef je AI-agent een instructie in natuurlijke taal — de agent vertaalt je intentie in de tooloproep:

Analyze https://app.example.com for accessibility issues. Set the session
cookie for app.example.com from ./.env.local so the scan starts already
logged in.

De agent lost de cookie waarde op en roept de analyze tool aan met een payload die lijkt op:

{
  "url": "https://app.example.com",
  "cookies": [
    {
      "name": "session",
      "value": "<resolved-from-.env.local>",
      "domain": "app.example.com"
    }
  ]
}

Belangrijke Voordelen

• Testen in Echte Browser - Test de daadwerkelijk weergegeven pagina, niet alleen de broncode, om accurate resultaten te garanderen
• Organisatiestandaarden - Neemt de axe configuratie-instellingen van je team in acht voor consistente tests bij alle gebruikers
• Uitgebreide Dekking - Maakt gebruik van het toonaangevende axe-platform
• **Responsieve Testen** - Test bij specifieke viewport-afmetingen om toegankelijkheidsproblemen specifiek voor breekpunt te detecteren
• Gerichte Scans - Beperk een scan tot een specifiek gebied, iframe, of shadow root met de selector parameter
• Geauthenticeerde & Interactieve Pagina's - Scan pagina's achter een login, sluit cookiebanners, of wacht op dynamische inhoud met behulp van before acties
• Sessie- en Omgevingscookies - Land al geauthenticeerd, of routeer naar een specifieke omgeving door cookies te injecteren voordat navigatie met de cookies parameter

Uitvoer

De tool geeft een gestructureerd JSON-antwoord dat het volgende bevat:

• Alle gevonden toegankelijkheidsovertredingen
• Overtredingsniveaus (kritiek, ernstig, matig, minder)
• Specifieke elementselectors en broncode
• Regel-ID's en beschrijvingen

De remediate tool

De remediate tool neemt een of meer toegankelijkheidsproblemen geïdentificeerd door de analyze of igt tool en genereert contextbewuste, AI-gestuurde hersteladviezen die coderingsagenten kunnen vertalen in daadwerkelijke codeaanpassingen. Problemen worden als een batch ingediend, zodat één oproep aanpassingen kan retourneren voor elke overtreding die op een pagina is gevonden.

Wat Het Doet

1. Authenticatie - Validereert de gebruikersgegevens—of een API-sleutel of een OAuth 2.0 toegangstoken—om geautoriseerde toegang te waarborgen
2. AI-krediet Gebruik - Elk probleem in de batch verbruikt AI-credits uit de toewijzing van uw organisatie, waarmee gebruik van geavanceerde AI-modellen mogelijk wordt gemaakt die zijn getraind op ruime toegankelijkheidsexpertise van Deque
3. **AI-Gegenereerd Herstel** - Creëert hoogwaardige, actiegerichte toegankelijkheidsoplossingen die coderingsagenten kunnen interpreteren en implementeren in de broncode

Batch Remediation

De tool accepteert een issues array. Dien alle de problemen van een enkele analyze of igt run samen in één oproep in plaats van de tool één keer per probleem aan te roepen — een batch ondersteunt tussen 1 en 25 problemen.

Elk probleem heeft de volgende velden:

Stimuleer je AI-agent in natuurlijke taal — het stelt de batch samen uit de analyseresultaten:

Analyze http://localhost:3000 and remediate every issue found

De agent lost de prompt op en roept de remediate tool aan met een payload die lijkt op:

{
  "issues": [
    {
      "id": "color-contrast-0",
      "rule": "color-contrast",
      "elementHtml": "<span style=\"color: #aaa\">Sign up</span>",
      "remediation": "Increase the contrast ratio to at least 4.5:1",
      "pageUrl": "http://localhost:3000"
    },
    {
      "id": "image-alt-1",
      "rule": "image-alt",
      "elementHtml": "<img src=\"logo.png\">",
      "remediation": "Add alt text describing the image"
    }
  ]
}

Uitvoer

De tool retourneert een array van resultaten per probleem, elk teruggekoppeld naar zijn invoer door id. Een resultaat heeft een van twee vormen:

• Succes — status: "ok", met een remediation object dat een algemene beschrijving, de herstelstappen en een concrete code-oplossing bevat
• Fout — status: "error", met een error object (code en message) voor een probleem dat niet kon worden hersteld

{
  "data": [
    {
      "id": "color-contrast-0",
      "status": "ok",
      "remediation": {
        "general_description": "...",
        "remediation": "...",
        "code_fix": "<span style=\"color: #595959\">Sign up</span>"
      }
    },
    {
      "id": "image-alt-1",
      "status": "error",
      "error": { "code": "LLM_ERROR", "message": "..." }
    }
  ]
}

Resultaten zijn onafhankelijk: een mislukking bij een issue blokkeert geen begeleiding voor de anderen.

Kredietgebruik

De remediate tool maakt deel uit van de AI-Kredietbeheersysteem. Elk probleem in een batch verbruikt credits van de maandelijkse toewijzing van uw organisatie. Beheerders kunnen het creditgebruik monitoren via het axe Accountportaal.

De igt Tool

De igt tool voert Deque's Automated Intelligent Guided Tests (IGTs) uit tegen een webpagina vanuit uw IDE. Waar de axe DevTools Browser Extensie normaal een ontwikkelaar door een IGT leidt met handmatige aanwijzingen, voert de igt tool de test automatisch uit en retourneert gestructureerde resultaten waar een coderingsagent op kan reageren.

Vandaag ondersteunt de tool de Keyboard IGT, die evalueert of de interactieve elementen op een pagina kunnen worden bereikt en bediend met alleen het toetsenbord.

Wat Het Doet

1. Authenticatie - Valideert de gebruikersinloggegevens—of een API-sleutel of een OAuth 2.0 toegangstoken—om geautoriseerde toegang te waarborgen
2. Browser-gebaseerde Run - Test in dezelfde Chromium-instantie met de axe DevTools Extensie gemonteerd die de analyze tool gebruikt
3. Paginanavigatie - Navigeert naar de door de gebruiker aangeleverde URL in hun prompt aan de AI-agent
4. Geautomatiseerde Keyboard IGT - Doorloopt de pagina terwijl AI elke tabblaak analyseert, de focusvolgorde en toetsenbordbediening evalueert—geen handmatige invoer vereist
5. Resultaatlevering - Stuurt gestructureerde bevindingen terug naar de agent

Gebruik

De tool accepteert een url en een igtTools-array die aangeeft welke IGT's moeten worden uitgevoerd. De toetsenbord-IGT is momenteel de enige ondersteunde waarde:

{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"]
}

Stuur uw AI-agent in natuurlijke taal aan—de agent vertaalt uw intentie in de toolaanroep:

Run the keyboard IGT on http://localhost:3000

Browserinteracties Voor Testen

Net als de analyze-tool accepteert igt een optionele before-array van interactiestappen die nadat de pagina wordt geladen maar voordat de begeleide test start uitvoeren. Dit stelt je in staat om een geleide test uit te voeren op pagina's met inlogvereisten, cookie-banners te verwijderen of te wachten tot dynamische inhoud eerst verschijnt.

De stappen worden in de browsercontext van de test uitgevoerd (zodat cookies, localStorage en routewijzigingen behouden blijven), maken gebruik van dezelfde click-, fill- en waitFor-acties, en zijn beperkt tot dezelfde 20 stappen. Zie Ondersteunde acties onder de analyze-tool voor de volledige referentie, inclusief de gevoelige-waardehandeling van fill.value en de selectorregels.

{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"],
  "before": [
    { "action": "fill", "selector": "#username", "value": "<resolved-from-.env.local>" },
    { "action": "click", "selector": "button[type=submit]" },
    { "action": "waitFor", "selector": "#main-content" }
  ]
}

Uitvoer

De tool geeft een gestructureerd JSON-antwoord:

{
  "pageUrl": "http://localhost:3000",
  "data": {
    "keyboard": {
      "issues": [],
      "unanalyzedElements": [],
      "terminatedReason": "keyboard-trap"
    }
  }
}

• issues - Toegankelijkheidsschendingen voor het toetsenbord die tijdens de test werden gevonden
• unanalyzedElements - Tabstoppen die de AI niet kon analyseren. Deze worden afzonderlijk van issues gerapporteerd zodat ze handmatig kunnen worden beoordeeld, in plaats van verkeerd te worden gerapporteerd als passerend of onvoldoende.
• terminatedReason - Toon in de post-interactiestatus wanneer de test voortijdig werd beëindigd voordat elke tabstop was geanalyseerd. De huidige waarde is "keyboard-trap", wat betekent dat de test een toetsenbordval ervoer waaruit hij niet kon ontsnappen; de resterende stappen worden stopgezet en de tot dat punt geanalyseerde tabstoppen worden geretourneerd in issues.

Kredietgebruik

De igt-tool is een AI-gestuurde functie en maakt deel uit van de AI-Kredietbeheersysteem. Elke uitvoer gebruikt AI-credits van de maandelijkse toewijzing van je organisatie. Beheerders kunnen het gebruik van credits door middel van het axe Accountportaal monitoren.

Aan de slag

Het instellen van de axe MCP Server omvat drie onafhankelijke keuzes:

1. Kies een distributie — Docker of npm
2. Stel authenticatie in — een API-sleutel of OAuth 2.0
3. Configureer uw client — VS Code met Copilot, Cursor of **Claude Code**

Voor omgevingsvariabelen en aanbevolen AI-agentinstructies, zie de Configuratiereferentie. Als er iets misgaat, zie Probleemoplossing.

Voorbeeldprompten

Zorgen dat verwachte tools worden aangeroepen

In veel IDE's zorgt het gebruik van de volgende syntaxis ("#"-voorvoegsel) ervoor dat de axe MCP Server-tools worden aangeroepen zoals verwacht:

#analyze the http://localhost:3033/ web page for accessibility issues and #remediate any violations found

Analyse van een localhost-URL voor toegankelijkheidsproblemen:

Analyze http://localhost:3000 for accessibility issues

Analyse met remediëring:

Analyze https://example.com for accessibility issues and fix any issues found

Analyseer een pagina achter een login:

Analyze http://localhost:3000 for accessibility issues. Before running the
analysis, fill in the #username and #password fields with USERNAME and
PASSWORD from ./.env.local, click the button[type=submit] button, and
wait for #main-content to appear.

Verwijder een cookiebanner voordat je scant:

Analyze https://example.com for accessibility issues, but first click the
#cookie-dismiss button to dismiss the cookie consent banner.

Scan een pagina met een geïnjecteerde sessiecookie:

Analyze https://app.example.com for accessibility issues. Set the session
cookie for app.example.com from ./.env.local so the scan starts already
logged in.

Ondersteuning

Voor vragen, problemen of feedback met betrekking tot de axe MCP Server:

• Technische ondersteuning: helpdesk@deque.com
• Algemene vragen: helpdesk@deque.com
• Verkoopvragen: sales@deque.com

Veiligheid & privacy FAQ

Slaat de axe MCP Server onze broncode op?

Nee. De axe MCP-server vangt je broncode niet op en slaat deze niet op in een database of permanente opslag.

Wanneer de analyze-tool wordt uitgevoerd, bevat de respons de HTML-broncode van elementen met toegankelijkheidsproblemen voor context- en foutopsporingsdoeleinden. Deze gegevens worden echter:

• Worden alleen teruggestuurd in het directe API-antwoord naar uw AI-agent
• Worden nooit opgeslagen in door Deque beheerde databases
• Blijven binnen uw lokale ontwikkelomgeving
• Worden verwijderd nadat de analyse is voltooid

Hoe lang blijven MCP-testresultaten op door Deque beheerde infrastructuur?

Helemaal niet. MCP-testresultaten worden niet bewaard in een door Deque beheerde database of opslag.

De analyze-tool:

• Draait volledig op uw machine — in een Docker-container, of als een lokaal Node.js-proces met de npm-distributie
• Stuurt resultaten direct naar uw AI-agent
• Stuurt geen analyseresultaten naar Deque-servers

De enige uitzondering is wanneer je de remediate-tool oproept, die minimale schendingsmetadata kan bevatten (zie hieronder) om AI-gestuurde reparatiebegeleiding te genereren.

Welke gegevens worden naar Deque-servers verzonden?

Alleen bij het gebruik van de remediate-tool:

De volgende gegevens worden naar Deque's AI-herstellingsendpoint gestuurd om hersteladviezen te genereren:

• Regel ID - De specifieke toegankelijkheidsregel die werd geschonden
• Element HTML - De HTML-markering van het getroffen element of de elementen
• Probleemmetadata - Omschrijving van de schending en hersteladviezen van axe-core

Deze gegevens worden uitsluitend gebruikt om hersteladvies te genereren en worden niet langdurig opgeslagen in Deque-databases.

De analyze-tool stuurt geen gegevens naar Deque-servers behalve authenticatieverzoeken (het valideren van je API-sleutel of OAuth 2.0-toegangstoken).

Welk toegangslevel heeft de AI-agent nodig om te functioneren?

De AI-agent (Claude, Copilot, Cursor, etc.) heeft toegang nodig tot:

1. MCP Server Communicatie - De agent moet in staat zijn om de tools van de MCP-server aan te roepen via het Model Context Protocol

2. Antwoordgegevens van tools - De agent ontvangt:

   • Toegankelijkheidsschendinggegevens van analyze-oproepen
   • Hersteladviezen van remediate-oproepen
   • Deze gegevens zijn noodzakelijk voor de agent om problemen te begrijpen en codeherstel te genereren

3. Uw codebasis (optioneel) - Als je wilt dat de agent automatisch codeherstel toepast, heeft het toegang nodig tot je broncodebestanden

• Dit is standaard voor AI-coderingsassistenten in IDE's (VS Code, Cursor, enz.)
• Niet vereist als u de tools alleen gebruikt voor analyse en begeleiding (bijv., via Claude Desktop-app)

De MCP-server zelf heeft toegang nodig tot:

• URL's die u opgeeft voor testen (ondersteunt zowel lokaal als op afstand)
• Je axe-gegevens: ofwel een API-sleutel (gegenereerd in het axe Accountportaal) of een OAuth 2.0-toegangstoken (verkregen via @deque/axe-auth); verstrekt via omgevingsvariabele

Belangrijk: De MCP-server draait lokaal op je machine — in een Docker-container of als een Node.js-proces met de npm-distributie. Het vereist geen brede toegang tot het besturingssysteem of verhoogde privileges.

Best Practices

• Inloggegevensbeveiliging - Sla je AXE_API_KEY of AXE_ACCESS_TOKEN op als een omgevingsvariabele, niet in de code. Met OAuth 2.0 houdt @deque/axe-auth tokens in je OS-sleutelhanger en injecteert een nieuwe toegangstoken bij het opstarten, zodat er geen langlevend geheim in je configuratie hoeft te staan
• Lokale Testen - Test lokale ontwikkelings-URL's (localhost) of staging om gevoelige pre-productiecode geïsoleerd te houden
• Netwerkisolatie - De MCP-server communiceert alleen met:
  • URL's die je expliciet aanvraagt om te analyseren
  • Deque-servers voor authenticatie (API-sleutel of OAuth 2.0-tokenvalidatie) en herstel (wanneer opgeroepen)
  • Je lokale AI-agent via het MCP-protocol
• Controleer voor Toepassing - Controleer altijd AI-gegenereerde codewijzigingen voordat je ze naar je codebase commit