QualiBooth
Svenska

Nytt i Agora · MCP-server

Din AI-kodagent, nu en tillgänglighetsexpert.

Agoras inbyggda MCP-server ger Claude Code, Cursor, GitHub Copilot och alla andra MCP-kompatibla agenter ett riktigt verktyg för tillgänglighetstester. Din agent skannar sidan den just har byggt, ser exakt vad som brister och varför, rättar koden och skannar igen för att bevisa det – innan pull requesten ens finns.

Starta din kostnadsfria provperiod Boka en demo
Körs på din dator
Enbart lokal server, lokala skanningar
Ett kommando
för att koppla in din kodagent

Animerat exempel på en kodsession: en utvecklare ber sin AI-agent att kontrollera localhost:3000/checkout efter tillgänglighetsproblem och åtgärda dem. Agenten anropar Agoras verktyg scan_url och får 58 av 100 poäng med fyra problem: en knapp utan namn, en bild utan alternativtext, text med låg kontrast och ett inmatningsfält utan etikett. Den rättar koden i tre filer, skannar igen och når 100 av 100.

Fungerar med

  • Claude Code
  • Cursor
  • VS Code + Copilot
  • Windsurf
  • Claude Desktop
  • Codex CLI
  • Gemini CLI

Luckan i AI-skrivet UI

Agenter skriver UI snabbare än någon hinner granska tillgängligheten.

Kodagenter har lärt sig av webben, och det mesta av webben är otillgängligt: knappar med bara en ikon, saknade etiketter, text med låg kontrast. Utan ett sätt att testa kan din agent inte avgöra om komponenten den just genererat fungerar för den som använder tangentbord eller skärmläsare. Nu kan den kontrollera det, med samma motor som ditt tillgänglighetsteam redan litar på.

Utan Agora

  • Agenten gissar kring ARIA och hoppas på det bästa.
  • Tillgänglighetsbuggar dyker upp i QA, i en granskning eller hos dina användare.
  • Åtgärderna kommer veckor senare, utan sammanhang och till hög kostnad.
  • ”Ser bra ut för mig” är den enda verifieringen.

Med Agora MCP

  • Agenten granskar sitt eget resultat i en riktig webbläsare.
  • Varje problem levereras med selektor, HTML och hur du åtgärdar det.
  • Åtgärderna hamnar i samma ändring, medan sammanhanget är färskt.
  • En ny skanning bevisar åtgärden innan någon granskar koden.

Igång på en minut

Koppla in en gång. Din agent sköter resten.

  1. 01

    Slå på den

    MCP-servern startar tillsammans med Agora och lyssnar bara på din dator. Sidan AI Agents visar status och adressen du ska använda.

  2. 02

    Koppla in din agent

    Kopiera ett kommando eller ett konfigurationsutdrag från Agora, eller använd installation med ett klick för Cursor och VS Code.

  3. 03

    Fråga bara

    ”Skanna localhost:3000 och åtgärda det du hittar.” Din agent anropar Agora, genomför åtgärderna och verifierar dem.

Inuti ett verktygsanrop

Det här får din agent faktiskt

Inga vaga poäng. Agora returnerar varje överträdelse med WCAG-kriterium, exakt element, dess HTML och en konkret åtgärd, i ett format som en agent kan agera på direkt.

Agent → Agora

{  "method": "tools/call",  "params": {    "name": "scan_url",    "arguments": {      "url": "localhost:3000/checkout",      "selector": "#payment-form",      "viewports": ["desktop", "mobile"]    }  }}

Agora → agent

58

http://localhost:3000/checkout

3 problem · 5 element · WCAG 2.2 AA

  • Critical button-name WCAG 4.1.2

    Buttons must have discernible text

    button.pay-apple

    <button class="pay-apple"><svg …/></button>

    Så åtgärdar du det: Element does not have inner text that is visible to screen readers; aria-label attribute does not exist or is empty

  • Critical label WCAG 4.1.2

    Form elements must have labels

    #card-cvc

    <input id="card-cvc" placeholder="CVC">

    Så åtgärdar du det: Element does not have an explicit <label>; aria-label attribute does not exist or is empty

  • High color-contrast WCAG 1.4.3

    Elements must meet minimum color contrast ratio thresholds

    .total__hint

    <p class="total__hint">Taxes included</p>

    Så åtgärdar du det: Element has insufficient color contrast of 2.9 (foreground color: #a3a3a3, background color: #ffffff). Expected contrast ratio of 4.5:1

Fyra verktyg, alla arbetsflöden

Testa sidan som körs eller HTML-koden du just skrev

Skanna valfri URL

scan_url

Lokala utvecklingsservrar, staging, produktion eller en fil på disken.

  • Fokusera på en komponent med en CSS-selektor
  • Vänta på klientrenderat innehåll
  • Viewports för desktop och mobil
  • Valfri skärmdump av det skannade området

Skanna rå HTML

scan_html

Granska en komponent innan den kopplas in på en sida, helt utan server.

  • Renderas i minnet i en riktig Chrome
  • Komponentläget hoppar över regler på sidnivå
  • Läser in din CSS från en bas-URL för korrekt kontrast
  • Samma detaljerade rapport som scan_url

Validera attribut

validate_attributes

Skannrar hittar namn som saknas. Det här verktyget kontrollerar om namnen som finns faktiskt är begripliga.

  • Kontrollerar aria-label, alt, title, etiketter och länktext
  • AI flaggar vaga värden som ”bild” eller ”klicka här”
  • Hittar filnamn och etiketter på fel språk
  • Selektor, HTML och orsak för varje flaggat värde

Simulera en skärmläsare

simulate_screen_reader

Hör en sida eller komponent som blinda användare gör, direkt från Chromes tillgänglighetsträd.

  • Varje uppläsning i läsordning
  • Rubriker, landmärken, länkar, formulär, bilder och tabeller
  • AI-granskning av läsordning och rubrikstruktur
  • Fungerar med en URL eller med HTML

Tillgängligt från början

Tillgänglighet blir en del av hur din agent arbetar

I stället för en separat granskning veckor senare sker testningen i samma loop som din agent redan kör för typer, tester och linting.

  1. 01

    Bygg

    Din agent skriver eller ändrar UI.

  2. 02

    Skanna

    Den anropar Agora för sidan eller komponenten.

  3. 03

    Åtgärda

    Den genomför åtgärderna som Agora pekar ut.

  4. 04

    Verifiera

    Den skannar igen tills problemen är borta.

Därför väljer team det

Byggt för utvecklare, betrott av tillgänglighetsteam

4
verktyg: två skannrar, etikettkontroll och skärmläsare
7+
AI-assistenter med guidad installation
WCAG 2.2
A- och AA-regler, plus AAA-kontroller
0
byte av din kod skickas till molnet

Vanliga frågor

Vad är MCP?
Model Context Protocol är en öppen standard som låter AI-assistenter använda externa verktyg. Agora har en inbyggd MCP-server, så att alla MCP-kompatibla assistenter kan köra tillgänglighetsskanningar via den.
Vilka AI-assistenter stöds?
Alla klienter som stöder MCP. Agora innehåller steg-för-steg-instruktioner för Claude Code, Cursor, VS Code med GitHub Copilot, Windsurf, Claude Desktop, Codex CLI och Gemini CLI.
Lämnar min kod min dator?
Nej. MCP-servern accepterar bara anslutningar från din egen dator, och Agora renderar och skannar sidorna lokalt. Endast AI-kontrollerna i validate_attributes och simulate_screen_reader skickar de insamlade etiketterna och uppläsningarna, aldrig hela sidan, till QualiBooths API.
Kan den testa sidor på localhost?
Ja, det är just det den är byggd för. Peka din agent mot din utvecklingsserver, en staging-miljö eller en lokal fil.
Kan den testa en komponent som inte finns på en sida än?
Ja. Verktyget scan_html renderar markup i minnet, utan server. För komponentutdrag hoppar den över regler på sidnivå, som dokumenttitel och landmärken, så att rapporten fokuserar på själva komponenten.
Vad behöver jag för att komma igång?
Agora, inloggat med ett QualiBooth-konto som har en desktoplicens. MCP-servern startar automatiskt och sidan AI Agents guidar dig genom att koppla in din assistent.
Ersätter det manuella tillgänglighetstester?
Nej. Automatiska kontroller fångar en stor del av problemen tidigt, men beteendet för tangentbord, fokus och skärmläsare behöver fortfarande testas av människor. Agora MCP ser till att grunderna är på plats innan en människa tittar.

Leverera tillgängligt UI i AI-takt

Starta en kostnadsfri provperiod av Agora, koppla in din kodagent på en minut och se den åtgärda tillgänglighetsproblem innan de når kodgranskningen.

Starta din kostnadsfria provperiod Boka en demo