MCP Accessibility Bridge

You expose a live browser’s accessibility tree to an MCP client, enabling you to generate stable, framework-agnostic selectors and audit accessibility directly from your test automation workflow. This bridge connects Claude Desktop to a running Chrome via CDP, giving you precise ARIA data and reliable selectors without manually interacting with DevTools.

How to use

You enable the MCP server in your client configuration, start Chrome with remote debugging enabled, and then connect Claude Desktop to the bridge. Once connected, you can fetch the full accessibility tree for the current page, search by ARIA role and name, retrieve element properties, and locate all interactive elements. Use these capabilities to build, validate, and migrate cross-framework test selectors, or to audit pages for accessibility issues.

How to install

Prerequisites: Node.js installed on your machine, and Chrome available with remote debugging enabled when you run the bridge.

{
  "mcpServers": [
    {
      "name": "access_bridge",
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-accessibility-bridge"]
    }
  ]
}

Additional configuration and usage notes

Place the configuration in Claude Desktop as shown above. When you save the config and restart Claude Desktop, the accessibility bridge tools will be available in Claude’s tool list.

Chrome setup

Ensure Chrome is running with a remote debugging port open before establishing a connection.

Usage examples

Connect to a Chrome instance, navigate to a page, and then request actions such as fetching the accessibility tree or locating interactive elements. Use the generated selectors to drive tests across frameworks like Playwright, Selenium, Cypress, and WebdriverIO.

Example project and structure

A representative example demonstrates how selectors produced by this bridge can be consumed by a test suite across multiple frameworks, illustrating how to integrate AX-based selectors into your automation stack.

What you can do with the bridge

• Read every element’s role, name, state, and relationships as a screen reader would. - Generate reliable, stable test selectors for multiple frameworks without opening DevTools. - Audit pages for accessibility issues. - Write and migrate tests using natural language.

Notes on architecture and how it works

The bridge uses a standard input/output MCP server approach. It connects to Chrome via the Chrome DevTools Protocol, activates the Accessibility domain, and exposes a set of tools that compute AX trees, resolve element properties, and generate cross-framework selectors.

Troubleshooting

If you encounter connection issues, verify that Chrome is started with --remote-debugging-port=9222 and that Claude Desktop is using the correct MCP configuration. Ensure the CDP WebSocket is reachable and that the bridge has established a BrowserManager connection.

Contributing

Contributions are welcome. Follow standard development workflows to add features, fix bugs, or improve selector generation heuristics.

License

MIT — see LICENSE.

Available tools

browser_connect

Connect Claude to a running Chrome instance via CDP, establishing a shared CDP session.

browser_navigate

Navigate the connected tab to a specified URL and report status, title, and final URL.

browser_disconnect

Close the CDP connection cleanly without terminating Chrome.

get_accessibility_tree

Snapshot the full accessibility tree for the current page with options for depth and scope.

query_accessibility_tree

Search the AX tree by ARIA role and accessible name to locate matching nodes.

get_element_properties

Resolve a CSS selector to a full AX profile and multi-framework selectors.

get_interactive_elements

Identify all interactive elements on the page and generate selectors for them.

get_focused_element

Return AX info and selectors for the currently focused element.