Nieuw in Agora · MCP-server
Met de ingebouwde MCP-server van Agora krijgen Claude Code, Cursor, GitHub Copilot en elke andere MCP-compatibele agent een echte tool voor toegankelijkheidstests. Je agent scant de pagina die hij net heeft gebouwd, ziet precies wat er misgaat en waarom, past de code aan en scant opnieuw als bewijs – nog voordat de pull request bestaat.
Geanimeerd voorbeeld van een codeersessie: een developer vraagt zijn AI-agent om localhost:3000/checkout te controleren op toegankelijkheidsproblemen en die op te lossen. De agent roept de scan_url-tool van Agora aan en krijgt een score van 58 uit 100 met vier problemen: een knop zonder naam, een afbeelding zonder alternatieve tekst, tekst met te weinig contrast en een invoerveld zonder label. Hij past de code aan in drie bestanden, scant opnieuw en haalt 100 uit 100.
Werkt met
Het gat in door AI geschreven UI
Codeeragents hebben geleerd van het web, en het grootste deel van het web is ontoegankelijk: knoppen met alleen een icoon, ontbrekende labels, tekst met te weinig contrast. Zonder testmogelijkheid kan je agent niet weten of het component dat hij net heeft gegenereerd werkt voor iemand die een toetsenbord of screenreader gebruikt. Nu kan hij dat controleren, met dezelfde engine waar je toegankelijkheidsteam al op vertrouwt.
In een minuut ingesteld
De MCP-server start samen met Agora en luistert alleen op je eigen computer. De pagina AI Agents toont de status en het adres dat je gebruikt.
Kopieer één commando of configuratiefragment uit Agora, of installeer met één klik in Cursor en VS Code.
„Scan localhost:3000 en los op wat je vindt.” Je agent roept Agora aan, voert de fixes door en controleert ze.
Binnen een tool call
Geen vage scores. Agora geeft elke overtreding terug met het WCAG-criterium, het exacte element, de HTML en een concrete oplossing, in een formaat waar een agent direct mee aan de slag kan.
Agent → Agora
Nederlands 
English 
Deutsch 
Español 
Italiano 
Български 
简体中文 
Polski 
Dansk 
Svenska 
Français 
Português 
Ελληνικά 
Català 
Română 
Suomi 
Čeština 
Magyar 
{ "method": "tools/call", "params": { "name": "scan_url", "arguments": { "url": "localhost:3000/checkout", "selector": "#payment-form", "viewports": ["desktop", "mobile"] } }}Agora → agent
http://localhost:3000/checkout
3 problemen · 5 elementen · WCAG 2.2 AA
button-name WCAG 4.1.2 Buttons must have discernible text
button.pay-apple
<button class="pay-apple"><svg …/></button>Zo los je het op: Element does not have inner text that is visible to screen readers; aria-label attribute does not exist or is empty
label WCAG 4.1.2 Form elements must have labels
#card-cvc
<input id="card-cvc" placeholder="CVC">Zo los je het op: Element does not have an explicit <label>; aria-label attribute does not exist or is empty
color-contrast WCAG 1.4.3 Elements must meet minimum color contrast ratio thresholds
.total__hint
<p class="total__hint">Taxes included</p>Zo los je het op: Element has insufficient color contrast of 2.9 (foreground color: #a3a3a3, background color: #ffffff). Expected contrast ratio of 4.5:1
Agent → Agora
{ "method": "tools/call", "params": { "name": "scan_html", "arguments": { "html": "<nav class=\"tabs\">…</nav>", "baseUrl": "http://localhost:3000/", "mode": "component" } }}Agora → agent
HTML component (2.4 KB)
3 problemen · 4 elementen · WCAG 2.2 AA
aria-required-children WCAG 1.3.1 Certain ARIA roles must contain particular children
nav.tabs > ul[role="tablist"]
<ul role="tablist">…</ul>Zo los je het op: Element has children which are not allowed: li[tabindex]
aria-valid-attr-value WCAG 4.1.2 ARIA attributes must conform to valid values
#tab-billing
<a id="tab-billing" aria-controls="billing">Zo los je het op: Invalid ARIA attribute value: aria-controls="billing"
heading-order Best Practice Heading levels should only increase by one
.panel > h4
<h4>Billing address</h4>Zo los je het op: Heading order invalid
Vier tools, elke workflow
scan_url Lokale dev-servers, staging, productie of een bestand op schijf.
scan_html Audit een component voordat het in een pagina is opgenomen, zonder server.
validate_attributes Scanners vinden ontbrekende namen. Deze tool controleert of de namen die er wel zijn ook kloppen.
simulate_screen_reader Hoor een pagina of component zoals blinde gebruikers dat doen, rechtstreeks uit de toegankelijkheidsboom van Chrome.
Standaard toegankelijk
In plaats van een aparte audit weken later gebeurt het testen in dezelfde loop die je agent al doorloopt voor types, tests en linting.
Bouwen
Je agent schrijft of wijzigt UI.
Scannen
Hij roept Agora aan voor de pagina of het component.
Oplossen
Hij voert de fixes door die Agora aanwijst.
Verifiëren
Hij scant opnieuw tot de problemen weg zijn.
Waarom teams ervoor kiezen
De server accepteert alleen verbindingen vanaf je eigen computer, en pagina’s worden lokaal in Agora gerenderd en gescand.
axe-core met WCAG 2.0-, 2.1- en 2.2-regels voor A en AA, plus optionele AAA-controles: dezelfde regels als bij elke andere Agora-scan.
Pagina’s renderen in Chrome, dus styles, scripts en client-side rendering tellen allemaal mee in de test.
Dev-servers met self-signed certificaten, file://-paden en pagina’s achter basic auth die je in Agora hebt opgeslagen: het werkt gewoon.
Een gedeelde, al opgestarte browser houdt scans snel, zodat je agent na elke wijziging kan controleren.
Claude Code, Cursor, VS Code met GitHub Copilot, Windsurf, Claude Desktop, Codex CLI en Gemini CLI, met installatiestappen voor elk ervan in Agora.
Start een gratis proefperiode van Agora, koppel je codeeragent in een minuut en zie hoe hij toegankelijkheidsproblemen oplost voordat ze de code review bereiken.