Accessibility Scanner MCP server for AI agents

The MCP Accessibility Scanner is a powerful tool that integrates with language models to perform automated web accessibility scanning and browser automation. Using Playwright and Axe-core, it can check WCAG compliance, interact with web pages, manage browser sessions, 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 using Docker, which includes all necessary dependencies:

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

# Run the container (interactive mode with debug enabled)
docker run -it -e MCP_PROXY_DEBUG=true mcp-server

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

VS Code Integration

Install the scanner directly in VS Code using:

# For regular 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, use this configuration:

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

Available Tools

Accessibility Scanning Tools

accessibility-scan

Performs comprehensive accessibility testing 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

Ask the LLM to perform a scan:

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

Color Contrast Check

Focus on specific accessibility aspects:

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

Multi-step Workflow with Sessions

Create workflows that require multiple actions:

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

Discover interactive elements:

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

Smart Element Interaction

Interact with elements by their visible text:

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

Note that all tools automatically save annotated screenshots to your downloads folder, with accessibility violations highlighted in red and numbered badges for easy reference.

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