MCP Accessibility Scanner

A Model Context Protocol (MCP) server for performing automated accessibility scans of web pages using Playwright and Axe-core.

Features

✅ Full WCAG 2.1/2.2 compliance checking
🖼️ Automatic screenshot capture with violation highlighting
📄 Detailed JSON reports with remediation guidance

Installation

# Clone repository
git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner

# Install dependencies
npm install

# Build project (compiles TypeScript and installs Playwright browsers)
npm run prepare

Claude Desktop Configuration

Add the following to your Claude Desktop settings to enable the Accessibility Scanner server:

{
  "mcpServers": {
    "accessibility-checker": {
      "command": "node",
      "args": [
        "path/build/server.js"
      ]
    }
  }
}

Usage

The scanner exposes a single tool scan_accessibility that accepts:

url: The webpage URL to scan
violationsTag: Array of accessibility violation tags to check

Example usage in Claude:

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

Development

Start the TypeScript compiler in watch mode:

npm run watch

Test the MCP server locally:

npm run inspector

Project Structure

src/: Source code
- index.ts: MCP server setup and tool definitions
- accessibilityChecker.ts: Core scanning functionality
dist/: Compiled JavaScript output
package.json: Project dependencies and scripts
tsconfig.json: TypeScript configuration

Output

The scanner provides:

A visual report with numbered violations highlighted on the page
A detailed JSON report of all found violations
A full-page screenshot saved to Downloads