Skip to main content
Open Source & Free

Accessibility MCP Server for Cursor, Claude Code and VS Code

Check localhost pages with Playwright and axe-core. Create a fix plan, work through findings in your IDE and scan again after changes. Free, with no navable account.

Local MCP checks the loaded page. Hosted MCP retrieves your audit data and is a separate product offering.

WCAG 2.1 A and AA rules run by default. In version 0.2.0, you can extend the axe rule selection with wcag22aa. This is not a complete WCAG 2.2 evaluation.

The local scan has no login steps, banner clicks or dialog interactions. Plan these states separately and check what your test path actually reaches.

Set up MCPSee How It Works
WCAG 2.1 Level A + AA
EN 301 549 Mapped
Local execution

Works with Cursor, VS Code & Claude Code

The Challenge

Investigate barriers during development

Start your dev server and check the page you are working on. The scan returns rules, affected elements and technical guidance for your next code review.

Add keyboard and screen-reader tests. Rule findings alone cannot establish whether users understand and complete a task.

After each fix, test the same page state again.

axe-coreDefault scan engine
.navable-plan.jsonFindings and progress
localhostTest without a navable account
How It Works

Scan, plan and verify the fix

1. Scan

Your agent scans the page in a real browser

The AI agent opens your localhost page in headless Chromium, runs axe-core against WCAG 2.1 Level A + AA rules, and returns a structured report — all within your IDE.

"Scan http://localhost:3000 for accessibility issues"
2. Plan

A prioritized fix plan is generated automatically

Violations are mapped to WCAG success criteria and EN 301 549 clauses, sorted by severity (critical → minor), and written to a structured plan file your agent can execute.

generate_fix_plan({ scanId })
→ .navable-plan.json
3. Fix and test again

Your agent applies fixes using proven code patterns

Review your agent’s suggestion, change the source and repeat the same scan. Add manual tests and mark only verified fixes as done.

run_accessibility_scan({ url })
update_fix_status({ fixId, status: "done" })
Our Tools

Two Tools. One Workflow.

The MCP server provides the scanning engine. The agent skills provide structured, step-by-step instructions. Together, your AI agent follows a deterministic, repeatable workflow — not improvisation.

Open Source
navable MCP Server
@navable/mcp

Local MCP connects your agent to Chromium and axe-core. You can enable Pa11y/HTMLCS as a second engine and review the additional findings.

  • Scans any localhost URL in a real browser (Playwright + axe-core)
  • Optional dual-engine scanning with Pa11y/HTMLCS (v0.2) — cross-confirmed findings for audit-grade confidence
  • Returns WCAG 2.1 Level A + AA violations with severity, affected elements, and fix hints
  • Maps technical findings to documented EN 301 549 clauses
  • Generates structured fix plans your agent can execute step by step
  • Tracks fix progress — mark items done, skipped, or in progress
  • Ships 8 built-in reference resources: WCAG mapping, ARIA patterns, semantic HTML, fix patterns

Works with:

Cursor
VS Code (GitHub Copilot)
Claude Code
Any MCP-compatible client
View on GitHubnpm Package
Open Source
navable Agent Skills

Agent Skills guide scanning, fix-plan creation, code edits and re-testing. Your team reviews the findings and changes.

Scan & Fix

Scans a URL → generates a fix plan → applies code fixes → verifies with a re-scan

Fix Plan Executor

Resumes an existing fix plan and works through remaining items

Component Review

Reviews source code for accessibility issues — no browser needed, perfect for PR reviews

Page Structure Audit

Audits landmarks, heading hierarchy, navigation patterns, and document metadata

10 fix guides included:

Images, Forms, Color & Contrast, Navigation, Headings, Landmarks, ARIA, Keyboard, Language, Tables

Works with:

GitHub Copilot (.github/skills/)
Claude Code (.claude/skills/)
Cursor (.agents/skills/)
View on GitHub
Built-In Knowledge

Built-In Accessibility Knowledge

Load the fix guide for the affected rule or look up the relevant ARIA pattern. Check whether the example fits your code and user path.

WCAG 2.1 Mapping

All 50 Level A + AA success criteria mapped to EN 301 549 clauses, with testability classification and axe-core rule IDs.

ARIA Patterns

25 WAI-ARIA widget patterns from the W3C APG — roles, attributes, keyboard interactions, focus management, and common mistakes.

Semantic HTML

Reference of HTML elements with implicit ARIA roles, correct usage patterns, and the mistakes developers make most often.

Fix Patterns

55 axe-core rules with concrete before/after code examples, framework notes for React and Vue, and WCAG criteria references.

Test limits

Add manual tests to technical findings

WCAG and EN 301 549 mapping helps you classify findings. It does not mean that every criterion was tested automatically or that your service meets legal requirements.

Record the tested URL, state and active rules. Manually check focus paths, screen-reader output and content as well.

  • WCAG 2.1 A + AA as the default rule selection
  • EN 301 549 mapping as a technical reference
  • Only page states actually reached are tested
  • Manual tests for meaning and operation
  • Review fix suggestions in code review
  • Re-scan after relevant changes
Quick Setup

Connect MCP to your IDE

Add the configuration and start your dev server. npx downloads the package; the first scan may also download Chromium. No navable account or navable API key is required.

Create .vscode/mcp.json:

{
  "servers": {
    "navable": {
      "command": "npx",
      "args": ["-y", "@navable/mcp"]
    }
  }
}

Optional: enable additional WCAG 2.2 AA rules in .navable.json

{
  "axeTags": [
    "wcag2a",
    "wcag21a",
    "wcag2aa",
    "wcag21aa",
    "wcag22aa"
  ]
}

After setup, ask your agent:

"Scan http://localhost:3000 for accessibility issues"

Review the findings and proposed fix before applying it.

Compare accessibility MCP options

Details about other providers come from their linked documentation. This is not a performance comparison from our own tests.

OfferingAccess and executionTest approach
navable Local MCPFree, open source, no navable account; local browser.axe-core; optional Pa11y/HTMLCS. Loaded page, structured fix plan.
Axe MCP ServerAxe DevTools subscription; access through Deque sales.Local and remote URLs; login and banner steps plus guided tests according to Deque.
WebAbility MCPFree local and hosted tools; anonymous use has limits. Some features require an account.Multiple engines and flow scans according to the provider. Some features send data to its API.
See It In Action

Demo: From scan to fix plan

A real scan of a localhost page — from prompt to prioritized fix plan.

Frequently Asked Questions

Local MCP and Agent Skills are free and open source. They do not require a navable account. Access to hosted audit data is a separate offering; check the current product information for it.

The navable MCP tools scan rendered pages in a real browser. Any framework that serves pages on localhost is supported — React, Next.js, Vue, Nuxt, Svelte, Angular, Astro, plain HTML, or anything else.

The default selection includes axe rules tagged for WCAG 2.1 A and AA. The mapping assigns findings to EN 301 549; it does not confirm a complete evaluation of every criterion. See this page’s test-scope note for additional WCAG 2.2 rules.

No. Rule-based scans find machine-evaluable errors. Keyboard paths, understandable screen-reader output and the meaning of content need additional manual checks.

Local MCP runs the browser and scan on your machine. Your AI client handles prompts and tool results according to its own settings; depending on the provider, these may go to an AI service. Hosted MCP retrieves data from your navable Audit.

Cursor, VS Code with GitHub Copilot, and Claude Code. Any MCP-compatible client can use the server.

Start Shipping Accessible Products Today

Connect the local scanner to your IDE and test your next fix.

View on GitHub