Accessibility Scanner MCP server

This MCP Accessibility Scanner provides automated web accessibility testing and browser automation capabilities, allowing AI models to check WCAG compliance, interact with web pages, and generate detailed accessibility reports with visual annotations.

Installation Options

NPM Installation

You can install the package globally using npm:

npm install -g mcp-accessibility-scanner

Docker Installation

The scanner can be run as a Docker container:

# Build the Docker image
docker build -t mcp-server .

# Run in interactive mode with debugging
docker run -it -e MCP_PROXY_DEBUG=true mcp-server

# Run in background mode
docker run -d -p 3000:3000 mcp-server

VS Code Integration

Add the scanner to VS Code using the command line:

# 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

For Claude Desktop, add this configuration:

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

Available Tools

Accessibility Scanning Tools

accessibility-scan

Performs comprehensive accessibility scanning on a webpage.

Parameters:

• url: The webpage URL to scan (required)
• violationsTag: Array of WCAG/violation tags to check (required)
• viewport: Optional viewport size (default: 1920x1080)
• shouldRunInHeadless: Optional headless mode control (default: true)

Supported Violation Tags:

• WCAG levels: wcag2a, wcag2aa, wcag2aaa, wcag21a, wcag21aa, wcag21aaa, wcag22a, wcag22aa, wcag22aaa
• Section 508: section508
• Categories: cat.color (contrast), cat.aria, cat.forms, cat.keyboard, cat.language, cat.structure, etc.

Browser Automation Tools

click-element

Clicks an element by CSS selector.

• Parameters: url, selector, viewport, shouldRunInHeadless

click-element-by-text

Clicks elements by their visible text content.

• Parameters: url, text, elementType (optional), viewport, shouldRunInHeadless

type-text

Types text into an input field by CSS selector.

• Parameters: url, selector, text, viewport, shouldRunInHeadless

type-text-by-label

Types text into input fields by their label text.

• Parameters: url, labelText, text, viewport, shouldRunInHeadless

analyze-page

Analyzes page to identify all interactive elements.

• Parameters: url, viewport, shouldRunInHeadless
• Returns: Lists of all buttons, links, and inputs on the page

Session Management Tools

create-session

Creates a persistent browser session for multiple operations.

• Parameters: sessionId, viewport, shouldRunInHeadless
• Sessions auto-expire after 3 minutes of inactivity

navigate-session

Navigates to a URL in an existing session.

• Parameters: sessionId, url

click-session / click-session-by-text

Click elements within a session.

type-session / type-session-by-label

Type text within a session.

scan-session

Run accessibility scan on current page in session.

analyze-session

Analyze current page in session.

close-session

Close a browser session.

list-sessions

List all active browser sessions.

Usage Examples

Basic Accessibility Scan

Could you scan example.com for WCAG 2.1 AA compliance issues?

Color Contrast Check

Please check example.com for color contrast accessibility issues (cat.color).

Multi-step Workflow with Sessions

1. Create a session and navigate to example.com
2. Click the "Sign In" button
3. Type "[email protected]" into the email field
4. Run an accessibility scan on the login page
5. Close the session

Page Analysis

Can you analyze example.com and tell me what interactive elements are available?

Smart Element Interaction

Navigate to example.com and click the button that says "Get Started"

Note: All tools automatically save annotated screenshots to your downloads folder, with accessibility violations highlighted in red and numbered badges.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "accessibility-scanner" '{"command":"npx","args":["-y","mcp-accessibility-scanner"]}'

See the official Claude Code MCP documentation for more details.

For 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 > Tools & Integrations and click "New MCP Server".

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

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

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 explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

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

3. Restart Claude Desktop for the changes to take effect