README.md
Expose any live webpage's accessibility tree to Claude
MCP Accessibility Bridge
Expose any live webpage's accessibility tree to Claude — generate rock-solid, framework-agnostic test selectors in seconds.
Quick Start
No cloning. No building. Paste this into your Claude Desktop config and you're done:
{
"mcpServers": {
"accessibility-bridge": {
"command": "npx",
"args": ["-y", "mcp-accessibility-bridge"]
}
}
}
What Is This?
MCP Accessibility Bridge is a stdio MCP server that connects Claude Desktop to a live Chrome browser via the Chrome DevTools Protocol (CDP). It exposes the browser's full ARIA accessibility tree so Claude can:
- Read every element's role, name, state, and relationships exactly as a screen reader would
- Generate reliable, stable test selectors for Playwright, Selenium, Cypress, and WebdriverIO — without ever opening DevTools
- Audit pages for accessibility issues
- Write, debug, and migrate test suites using natural language
No bundled Chromium. Uses your existing Chrome installation via
puppeteer-core.
Architecture
┌─────────────────────────────────────────────────────────────────────┐
│ Claude Desktop │
│ │
│ ┌─────────────┐ MCP (stdio) ┌──────────────────────────┐ │
│ │ Claude │◄─────────────────►│ MCP Accessibility │ │
│ │ LLM │ JSON-RPC 2.0 │ Bridge (Node.js) │ │
│ └─────────────┘ │ │ │
│ │ ┌────────────────────┐ │ │
│ │ │ 8 MCP Tools │ │ │
│ │ │ browser_connect │ │ │
│ │ │ browser_navigate │ │ │
│ │ │ get_ax_tree │ │ │
│ │ │ query_ax_tree │ │ │
│ │ │ get_element_props │ │ │
│ │ │ get_interactive │ │ │
│ │ │ get_focused │ │ │
│ │ │ browser_disconnect│ │ │
│ │ └────────┬───────────┘ │ │
│ │ │ │ │
│ │ ┌────────▼───────────┐ │ │
│ │ │ BrowserManager │ │ │
│ │ │ (Singleton) │ │ │
│ │ │ Browser + Page + │ │ │
│ │ │ CDPSession │ │ │
│ │ └────────┬───────────┘ │ │
│ │ │ │ │
│ │ ┌────────▼───────────┐ │ │
│ │ │ Utilities │ │ │
│ │ │ axTree.ts │ │ │
│ │ │ selectorGen.ts │ │ │
│ │ │ errors.ts │ │ │
│ │ └────────────────────┘ │ │
│ └────────────┬─────────────┘ │
└──────────────────────────────────────────────────┼─────────────────┘
│
Tools (8)
browser_connectConnects to a running Chrome instance via CDP.browser_navigateNavigates the browser to a specific URL.get_ax_treeRetrieves the full accessibility tree of the current page.query_ax_treeQueries the accessibility tree for specific elements.get_element_propsGets detailed properties for a specific element.get_interactiveLists all interactive elements on the page.get_focusedReturns the currently focused element.browser_disconnectDisconnects from the browser instance.Configuration
claude_desktop_config.json
{"mcpServers": {"accessibility-bridge": {"command": "npx", "args": ["-y", "mcp-accessibility-bridge"]}}}Try it
→Connect to my open Chrome browser and list all interactive elements on the current page.
→Generate a stable Playwright test selector for the 'Submit' button based on its accessibility role and name.
→Audit the current page for accessibility issues and suggest improvements for screen reader compatibility.
→Find the currently focused element and describe its state and properties.