Neu in Agora · MCP-Server
Der integrierte MCP-Server von Agora gibt Claude Code, Cursor, GitHub Copilot und jedem anderen MCP-fähigen Agent ein echtes Werkzeug für Barrierefreiheitstests. Ihr Agent scannt die Seite, die er gerade gebaut hat, sieht genau, was fehlschlägt und warum, korrigiert den Code und scannt erneut als Beweis – noch bevor der Pull Request überhaupt existiert.
Animiertes Beispiel einer Coding-Session: Ein Entwickler bittet seinen KI-Agent, localhost:3000/checkout auf Barrierefreiheitsprobleme zu prüfen und sie zu beheben. Der Agent ruft das Agora-Tool scan_url auf und erhält einen Score von 58 von 100 mit vier Problemen: ein Button ohne Namen, ein Bild ohne Alternativtext, Text mit zu geringem Kontrast und ein Eingabefeld ohne Beschriftung. Er korrigiert den Code in drei Dateien, scannt erneut und erreicht 100 von 100.
Funktioniert mit
Die Lücke in KI-generierten UIs
Coding-Agents haben vom Web gelernt – und das Web ist größtenteils nicht barrierefrei: Buttons nur mit Icon, fehlende Labels, kontrastarmer Text. Ohne Testmöglichkeit kann Ihr Agent nicht erkennen, ob die gerade generierte Komponente für Tastatur- oder Screenreader-Nutzer funktioniert. Jetzt kann er es prüfen – mit derselben Engine, der Ihr Barrierefreiheitsteam bereits vertraut.
In einer Minute eingerichtet
Der MCP-Server startet zusammen mit Agora und ist nur auf Ihrem Computer erreichbar. Die Seite „AI Agents“ zeigt seinen Status und die zu verwendende Adresse.
Kopieren Sie einen Befehl oder ein Konfigurations-Snippet aus Agora – oder nutzen Sie die Ein-Klick-Installation für Cursor und VS Code.
„Scanne localhost:3000 und behebe, was du findest.“ Ihr Agent ruft Agora auf, setzt die Korrekturen um und verifiziert sie.
Ein Tool-Aufruf im Detail
Keine vagen Scores. Agora liefert jeden Verstoß mit WCAG-Kriterium, dem exakten Element, seinem HTML und einer konkreten Lösung – in einem Format, mit dem ein Agent sofort arbeiten kann.
Agent → Agora
Deutsch 
English 
Español 
Italiano 
Български 
简体中文 
Polski 
Nederlands 
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 Probleme · 5 Elemente · WCAG 2.2 AA
button-name WCAG 4.1.2 Buttons must have discernible text
button.pay-apple
<button class="pay-apple"><svg …/></button>Lösung: 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">Lösung: 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>Lösung: 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 Probleme · 4 Elemente · 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>Lösung: 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">Lösung: Invalid ARIA attribute value: aria-controls="billing"
heading-order Best Practice Heading levels should only increase by one
.panel > h4
<h4>Billing address</h4>Lösung: Heading order invalid
Vier Tools für jeden Workflow
scan_url Lokale Dev-Server, Staging, Produktion oder eine Datei auf der Festplatte.
scan_html Prüfen Sie eine Komponente, bevor sie in eine Seite eingebunden ist – ganz ohne Server.
validate_attributes Scanner finden fehlende Namen. Dieses Tool prüft, ob die vorhandenen Namen auch sinnvoll sind.
simulate_screen_reader Hören Sie eine Seite oder Komponente so, wie blinde Nutzer sie erleben, direkt aus dem Accessibility-Tree von Chrome.
Barrierefrei von Anfang an
Statt eines separaten Audits Wochen später wird im selben Loop getestet, den Ihr Agent ohnehin für Typen, Tests und Linting durchläuft.
Bauen
Ihr Agent schreibt oder ändert UI.
Scannen
Er ruft Agora für die Seite oder Komponente auf.
Beheben
Er setzt die Korrekturen um, auf die Agora hinweist.
Verifizieren
Er scannt erneut, bis alle Probleme behoben sind.
Warum Teams sich dafür entscheiden
Der Server akzeptiert nur Verbindungen von Ihrem eigenen Rechner; Seiten werden lokal in Agora gerendert und gescannt.
axe-core mit den A- und AA-Regeln von WCAG 2.0, 2.1 und 2.2 sowie optionalen AAA-Prüfungen: dieselben Regeln wie bei jedem anderen Agora-Scan.
Seiten werden in Chrome gerendert – Styles, Skripte und clientseitiges Rendering sind also Teil des Tests.
Dev-Server mit selbstsignierten Zertifikaten, file://-Pfade und Seiten hinter Basic Auth, die Sie in Agora gespeichert haben: Alles funktioniert einfach.
Ein gemeinsam genutzter, vorgewärmter Browser hält Scans schnell, sodass Ihr Agent nach jeder Änderung prüfen kann.
Claude Code, Cursor, VS Code mit GitHub Copilot, Windsurf, Claude Desktop, Codex CLI und Gemini CLI – mit Einrichtungsanleitung für jeden direkt in Agora.
Testen Sie Agora kostenlos, verbinden Sie Ihren Coding-Agent in einer Minute und sehen Sie zu, wie er Barrierefreiheitsprobleme behebt, bevor sie ins Code-Review gelangen.