Analyse-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 ontwikkel-URLs (bijv. localhost:3000) als externe productie-URLs.

Wat het doet

1. Authenticatie - Valideert de gebruikersreferenties (ofwel een API-sleutel of een OAuth 2.0-toegangstoken) om geautoriseerde toegang te garanderen
2. Configuratie ophalen - Haalt de gebruikersorganisatie-specifieke Axe-configuratie instellingen op, waaronder:
   • Standaard voor toegankelijkheidstests (bijv. WCAG 2.2 AA)
   • axe-core versie
   • Beoordeling nodig / beste praktijken
   • Geavanceerde regels voorinstelling
3. Browser-gebaseerde analyse - Start een browserinstantie op de achtergrond met de Axe DevTools Extension gemonteerd
4. Pagina navigatie - Navigeert naar de door de gebruiker in hun prompt aan de AI-agent verstrekte URL
5. Toegankelijkheidsscan - Voert een volledige toegankelijkheidsanalyse uit op de weergegeven pagina met behulp van de Axe DevTools Browser Extension, waarbij ervoor wordt gezorgd dat de daadwerkelijke gebruikerservaring wordt getest (niet alleen statische HTML)
6. Resultaten levering - Levert uitgebreide analyseresultaten terug aan de agent in een gestructureerd formaat

Responsief testen

De analyze tool ondersteunt optionele viewportWidth en viewportHeight parameters, waardoor u pagina's kunt testen op specifieke viewport-afmetingen. Dit is nuttig voor het opsporen van toegankelijkheidsproblemen die alleen bij bepaalde schermafmetingen optreden, zoals mobiele of tablet-breakpoints.

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

Wanneer beide parameters worden weggelaten, wordt de scan uitgevoerd bij 1000×1080. Het doorgeven van viewportWidth alleen stelt de hoogte standaard in op 1080; viewportHeight vereist dat viewportWidth is ingesteld. Beide afmetingen kunnen maximaal 7680 pixels zijn.

Gedeeltelijke pagina scans

Standaard scant de analyze tool de hele pagina. Om de scan te beperken tot een specifiek gebied, geeft u de optionele selector parameter door — handig om te focussen op een enkel component of om rumoerige, niet-gerelateerde delen van de pagina uit de resultaten te houden.

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

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

• Een array van CSS-selectors doorloopt iframe- of shadow-DOM-grenzen — elk segment selecteert de host voor de volgende. Gebruik alleen een array als het doel zich in een iframe of shadow root bevindt:

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

Een array ondersteunt tot 10 segmenten. Als de selector geen element op de pagina vindt, geeft de scan een foutmelding terug. Wanneer selector wordt weggelaten, wordt de hele pagina gescand.

Geef uw AI-agent een natuurlijke taalprompt — de agent vertaalt uw intentie in een oproep aan de tool:

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

Interactie met browser vóór het scannen

De analyze tool ondersteunt een optionele before array van interactiestappen die nadat de pagina is geladen maar voor de toegankelijkheidsscan worden uitgevoerd. Dit opent verschillende echte testscenario's:

• Pagina's met inlogbarrière — vul inloggegevens in en verstuur ze voordat u de pagina na inloggen scant
• Cookie/toestemmingsbanners — sluit banners die anders de inhoud van de pagina zouden overdekken of verbergen
• Dynamische inhoud — wacht tot client-gerenderde inhoud (routewijzigingen, laat-ingebrachte DOM) verschijnt voordat u gaat scannen

Stappen worden in array-volgorde uitgevoerd, in de zelfde browsercontext als de scan, zodat cookies, localStorage en elke routewijziging die door click of fill wordt geactiveerd, behouden blijven in de scan.

De before array ondersteunt tot 20 stappen. Elke stap krijgt een eigen timeout van BROWSER_TIMEOUT_MS (standaard 30000 ms); er is geen overschrijving per stap.

Ondersteunde acties

Voorbeeld: Inloggen voor het scannen

Geef uw AI-agent een natuurlijke taalprompt — de agent vertaalt uw intentie in een oproep aan de tool:

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 lost de prompt op en roept het analyze-hulpmiddel aan met een payload zoals:

{
  "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 op de browsercontext voor navigatie — zodat ze de allereerste aanvraag naar de pagina begeleiden. Dit is verschillend van before acties, die na navigatie uitvoeren en daarom geen invloed kunnen hebben op hoe het initiële verzoek wordt gerouteerd. Twee veelvoorkomende toepassingen:

• Omgevingsroutering — stel een selectorcookie voor staging of feature-branch in die wordt gelezen door een edge- of CDN-laag om te bepalen welke versie van de site moet worden geserveerd.
• Vooraf geauthenticeerde sessies — injecteer een geldige sessiecookie zodat de scan al ingelogd begint, zonder een inlogformulier door te voeren via before.

De cookies array ondersteunt tot 20 cookies.

Cookievelden

Voorbeeld: Landen op een vooraf geauthenticeerde pagina

Geef uw AI-agent een natuurlijke taalprompt — de agent vertaalt uw intentie in een oproep aan de tool:

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 op met een payload zoals:

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

Schermafbeeldingen

De analyze tool kan een screenshot van de pagina teruggeven naast het overtredingsrapport, zodat u kunt zien wat er is gescand. Geef de optionele screenshot parameter door om deel te nemen — een leeg object is genoeg:

{
  "url": "http://localhost:3000",
  "screenshot": {}
}

PNG is de standaard. Stel format in op "jpeg" voor een kleinere afbeelding op fotovolle pagina's:

{
  "url": "http://localhost:3000",
  "screenshot": { "format": "jpeg" }
}

De afbeelding komt terug als een standaard MCP-afbeeldingsinhoudsblok, na het overtredingsrapport.

Wat de schermafbeelding laat zien

• Het zichtbare venster, niet de volledige pagina. Inhoud onder de vouw is niet inbegrepen. Om meer van de pagina vast te leggen, geef een hoge viewportHeight door (bijv. 4096) zodat het zichtbare gebied de gewenste informatie omvat.
• De pagina zoals die was vlak voor de scan begon. De opname gebeurt net voor axe.run(), dus wijzigingen in de DOM die tijdens de scan plaatsvinden — SPA-herlaadbeurten, useEffect-updates, animaties, verzoeken onderweg — worden niet weergegeven. Bij single-page apps is deze afwijking gebruikelijk.

Kosten en ondersteuning van cliënten

Of de afbeelding inline wordt weergegeven, hangt af van uw MCP-client. De server geeft altijd een specificatie-geldig afbeeldingsblok terug, maar sommige clients vouwen toolresultaten in of slaan inline afbeeldingsvoorbeelden over — VS Code met Copilot toont het, terwijl Cursor en Claude Desktop dat mogelijk niet doen. Een ontbrekend voorbeeld is een weergavebeperking aan de clientzijde, geen mislukte opname.

Schermafbeeldingen opslaan op schijf

De schermafbeelding kan ook naar een bestand worden geschreven, wat een betrouwbare manier is om een opname te bekijken in een client die geen inline afbeeldingen weergeeft. Stel saveTo in op een absoluut pad:

{
  "url": "http://localhost:3000",
  "screenshot": { "saveTo": "/Users/me/Desktop/home.png" }
}

Of stel save: true in zodat de server de bestandsnaam kiest:

{
  "url": "http://localhost:3000",
  "screenshot": { "save": true }
}

Het absolute pad dat is geschreven komt terug in het messages array van de reactie, zodat uw agent u kan vertellen waar u het bestand kunt vinden.

Opslaan is van toepassing op alleen succesvolle scans. Als de scan mislukt nadat de screenshot is gemaakt, wordt de afbeelding inline weergegeven naast de fout, ongeacht inline, en wordt nooit naar de schijf geschreven.

Wanneer opname mislukt

Het vastleggen van screenshots is een inspanningsverplichting en zal nooit een scan laten falen. Als de opname een time-out heeft, geeft de scan nog steeds zijn resultaten weer met een opmerking in de messages array van de respons:

Screenshot capture failed: <reason>

Als de de scan zelf mislukt nadat de screenshot was genomen, wordt de afbeelding toch met de foutmelding teruggestuurd — de visuele staat van de pagina op het moment dat het mis ging, is meestal het meest bruikbare bewijs voor foutopsporing dat u heeft.

Geavanceerde regels

Naast het standaardregelsysteem van axe-core kan het analyze hulpmiddel Geavanceerde regels uitvoeren — geautomatiseerde tests die gebruikmaken van screenshots, computervisie en grote taalmodellen om problemen te ontdekken die axe-core alleen niet kan, zoals koppen die alleen op koppen lijken of informatieve afbeeldingen met niet-bruikbare alternatieve tekst.

Welk preset wordt uitgevoerd, wordt bepaald door de Axe-configuratie van uw organisatie, en — waar uw beheerder het toestaat — kan per server worden overschreven met AXE_ADVANCED_RULES of per scan met het advancedRules argument:

{
  "url": "http://localhost:3000",
  "advancedRules": "thorough"
}

Elke respons rapporteert het preset dat daadwerkelijk werd uitgevoerd en waar het vandaan kwam:

{
  "advancedRules": {
    "value": "thorough",
    "source": "tool_arg"
  }
}

Geavanceerde Regels komen met uw Axe DevTools voor Web-abonnement — dezelfde die u de Axe MCP Server geeft. Ze voegen ongeveer 15-20 seconden toe aan een scan, verbruiken AI-tegoeden, en zijn het enige geval waarin analyze paginagegevens (een volledige paginascreenshot plus pagina-structuur) naar Deque stuurt voor evaluatie. Zie Geavanceerde regels voor presets, voorrang, degradatieberichten en privacygegevens.

Belangrijkste Voordelen

• Echt Browser-Testen - Test de daadwerkelijk weergegeven pagina, niet alleen de broncode, en zorgt voor accurate resultaten
• Organisatiestandaarden - Respecteert de Axe-configuratie-instellingen van uw team voor consistente testresultaten voor alle gebruikers
• Alomvattende Dekking - Benut het toonaangevende Axe Platform
• Responsief testen - Test bij specifieke viewportafmetingen om toegangsbarières specifiek voor breekpunten te identificeren
• 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, verwerp cookie-banners, of wacht op dynamische inhoud met before acties
• Sessie- & Omgevingscookies - Beland al geverifieerd, of routeer naar een specifieke omgeving, door cookies in te voegen voor navigatie met de cookies parameter
• Visuele Context - Geef een screenshot van de pagina terug samen met het rapport met de screenshot parameter, ook wanneer een scan mislukt
• Geavanceerde regels - Identificeer problemen die visueel of contextueel redeneren vereisen, op een betrouwbaarheidsdrempel die uw organisatie beheert
• Intelligente Geleidelijke Tests - Voer de Keyboard, Interactive Elements, en Modal Dialog IGTs uit op dezelfde pagina in dezelfde oproep met de igtTools parameter

Uitvoer

Het hulpmiddel retourneert een gestructureerde JSON-reactie met:

• Alle vastgestelde toegankelijkheidsschendingen
• Niveaus van ernst van de overtredingen (kritiek, ernstig, matig, klein)
• Specifieke elementselectors en broncode
• Rule IDs en beschrijvingen
• Een advancedRules blok dat het Geavanceerde regels preset rapporteert dat werd uitgevoerd en waar het vandaan kwam
• Een messages array die eventuele opmerkingen over de uitvoering bevat (bijvoorbeeld een mislukte screenshotopname, een gedegradeerde geavanceerde regels uitvoering, of het pad waarnaar een screenshot werd opgeslagen)

Wanneer screenshot is ingesteld, volgt een afbeeldingsinhoudsblok op het rapport. Wanneer igtTools is ingesteld, worden IGT-resultaten samen met de Axe-resultaten teruggegeven, gesorteerd op IGT-naam.