Skip to main content

Accessibility MCP server for VS Code

To add an accessibility MCP server to VS Code, put https://mcp.webability.io/mcp in .vscode/mcp.json under servers with type http. GitHub Copilot in Agent mode can then scan pages for WCAG issues, write the fix and verify it, free and with no API key.

Last updated (4 October 2026). WebAbility publishes this page and maintains WebAbility MCP.

How to add WebAbility MCP to VS Code

The hosted server at https://mcp.webability.io/mcp needs no install and no API key.

VS Code: .vscode/mcp.json in your workspace

{
  "servers": {
    "webability": {
      "type": "http",
      "url": "https://mcp.webability.io/mcp"
    }
  }
}

  1. Save .vscode/mcp.json and select Start above the webability entry in the editor.
  2. Open Copilot Chat and switch to Agent mode. MCP tools are available in Agent mode.
  3. Select the tools icon in the chat input to confirm the webability tools are on.
  4. For visual_audit, start_audit and get_audit, use https://mcp.webability.io/mcp/auth as the url instead. It asks for sign-in until you are signed in. Use a free WebAbility account.

First prompt to try in VS Code

Paste into the agent chat

Use webability to scan https://webability.io for WCAG 2.2 AA issues, fix the critical ones in this workspace, then verify each fix.

What VS Code can do with it

The hosted server exposes 13 tools. The ones you will use first:

  • scan_page: Scan a live URL with axe-core, HTML_CodeSniffer and WebAbility detectors, merged into one issue list.
  • scan_html: Scan an HTML string or component markup before it ships.
  • check_color_contrast: Check a foreground and background pair against WCAG AA and AAA.
  • generate_ai_fix: Return a framework-aware code fix for one issue.
  • verify_fix: Re-check the element after the edit to confirm the issue is gone.
  • visual_audit: Vision pass for focus visibility, icon contrast and looks-like-a-button issues that DOM scanners miss. Needs a free account.

To scan localhost, run the local package with npx -y @webability/mcp. It adds find_source, scan_history and generate_report_pdf.

Questions VS Code users ask

Does VS Code use the same mcp.json format as Cursor?

No. VS Code reads a top-level servers object and each entry needs a type, here http. Cursor reads mcpServers. The URL is the same.

How do I sign in to WebAbility from VS Code?

Use https://mcp.webability.io/mcp/auth as the url in .vscode/mcp.json. The server answers 401 until you sign in, and VS Code then starts the sign-in flow. https://mcp.webability.io/mcp stays anonymous: the scan tools work there, and visual_audit, start_audit and get_audit return sign-in steps instead of disconnecting.

Is the WebAbility accessibility MCP server free in VS Code?

Yes. The scan and check tools work with no API key, under fair-use limits. A free WebAbility account unlocks visual_audit, start_audit and get_audit. The sign-in steps for VS Code are on this page. An AI agent with its own AgentMail inbox can sign up on its own: it chooses Sign in with AgentID on the WebAbility sign-in page (https://app.webability.io/auth/signin) and gets its own free account, with no human account or API key.

How many tools does the hosted server give VS Code?

The hosted server at https://mcp.webability.io/mcp exposes 13 tools. The local package (npx -y @webability/mcp) adds find_source, scan_history and generate_report_pdf.

Can I use WebAbility in claude.ai or Claude Desktop instead of VS Code?

Yes. In claude.ai or Claude Desktop, add https://mcp.webability.io/mcp/auth as a custom connector to use visual_audit and full audits. Use https://mcp.webability.io/mcp for the free scan tools only. Those apps start sign-in only when the server answers 401, which https://mcp.webability.io/mcp/auth does until you are signed in.

Can VS Code scan a page on localhost?

Not through the hosted server, which cannot reach your machine. Run the local package with npx -y @webability/mcp as a stdio server to scan localhost.

More on WebAbility MCP