Accessibility Scanner

🚀 MCP Accessibility Scanner 🔍

An MCP (Model Context Protocol) server that uses Playwright and Axe-core to provide automated web accessibility scanning. This server enables Large Language Models (LLMs) to perform WCAG compliance checks, capture annotated screenshots, and generate detailed reports.

🚀 Quick Start

The MCP Accessibility Scanner is a powerful tool for conducting automated web accessibility scans. It allows LLMs to perform WCAG compliance checks and generate detailed reports.

✨ Features

• ✅ Comprehensive support for WCAG 2.1/2.2 standard checks.
• 🖼️ Automatically capture screenshots and highlight violations.
• 📄 Generate detailed JSON reports with remediation suggestions.

📦 Installation

You can install the scanner using any of the following methods:

Using npm

npm install -g mcp-accessibility-scanner

Docker Installation

The project includes a Dockerfile to set up all necessary dependencies, including Node.js v22 and Python 3.13.

1. Build the Docker image:

docker build -t mcp-server .

2. Run the container:

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

You can also run it in the background:

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

Installation in VS Code

Install the accessibility scanner using the VS Code CLI in VS Code:

For 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"]}'

📚 Documentation

Configuration

Here is a configuration example for Claude Desktop:

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

Usage

The scanner exposes a single tool named scan_accessibility, which accepts the following parameters:

• url: The URL of the web page to scan (required).
• violationsTag: An array of accessibility violation tags to check (required).
• viewport: An optional object to customize the viewport size.
  • width: A number (default: 1920).
  • height: A number (default: 1080).
• shouldRunInHeadless: An optional boolean to control headless mode (default: true).

Note: When performing a scan, annotated screenshots of any accessibility violations will be automatically saved to your download folder.

Basic Usage

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

Advanced Usage

Can you scan example.com for accessibility issues using a 1280x720 viewport size and show the browser window?

🔧 Technical Details

Development

Clone the project and set it up:

git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install

Start the TypeScript compiler in watch mode:

npm run watch

Test the MCP server locally:

npm run inspector

Development with Docker

When developing with Docker:

1. Build the development image:

docker build -t mcp-server-dev .

2. Run it by mounting a volume for real-time code changes:

docker run -it -v $(pwd):/app mcp-server-dev bash

Project Structure

The project folder contains the following:

• Dockerfile: A configuration file for building the Docker image.
• package.json: A task list file containing project dependencies and scripts.
• index.js: The main application entry point.
• utils/: A directory containing various utility functions.

🤝 Contribution

Any contributions are welcome! Please refer to the project's CONTRIBUTING.md file for detailed information.

📄 License

This project is protected under the MIT License.