Accessibility Scanner MCP server for AI agents

The MCP Accessibility Scanner is a server that implements the Model Context Protocol to perform automated web accessibility testing. It uses Playwright and Axe-core to check websites for WCAG compliance issues, capture screenshots with highlighted violations, and generate detailed accessibility reports.

Installation Options

Using npm

Install the package globally using npm:

npm install -g mcp-accessibility-scanner

Using Docker

The scanner can be run as a Docker container:

Build the Docker image:

docker build -t mcp-server .

Run the container interactively with debugging enabled:

docker run -it -e MCP_PROXY_DEBUG=true mcp-server

Or run it in the background:

docker run -d -p 3000:3000 mcp-server

Setting Up in VS Code

Install the Accessibility Scanner directly in VS Code:

For standard VS Code:

code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

For VS Code Insiders:

code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

Configuration

Claude Desktop Configuration

Add this to your Claude Desktop configuration:

{
  "mcpServers": {
    "accessibility-scanner": {
      "command": "npx",
      "args": ["-y", "mcp-accessibility-scanner"]
    }
  }
}

Usage

The scanner provides a single tool called scan_accessibility that accepts the following parameters:

url: The webpage URL to scan (required)
violationsTag: Array of accessibility violation tags to check (required)
viewport: Optional object to customize the viewport size
- width: number (default: 1920)
- height: number (default: 1080)
shouldRunInHeadless: Optional boolean to control headless mode (default: true)

When running a scan, an annotated screenshot highlighting any accessibility violations will be automatically saved to your downloads folder.

Basic Example

In Claude, you can use natural language to trigger a scan:

Could you scan example.com for accessibility issues related to color contrast?

Advanced Example

For more control over the scanning parameters:

Could you scan example.com for accessibility issues with a viewport of 1280x720 and show the browser window?

This will run the scanner with a custom viewport size and with the browser window visible (non-headless mode).

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.