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.
You can install the package globally using npm:
npm install -g mcp-accessibility-scanner
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
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"]}'
For Claude Desktop, use this configuration:
{
"mcpServers": {
"accessibility-scanner": {
"command": "npx",
"args": ["-y", "mcp-accessibility-scanner"]
}
}
}
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:
wcag2a
, wcag2aa
, wcag2aaa
, wcag21a
, wcag21aa
, wcag21aaa
, wcag22a
, wcag22aa
, wcag22aaa
section508
cat.color
(contrast), cat.aria
, cat.forms
, cat.keyboard
, cat.language
, cat.structure
, etc.Clicks an element by CSS selector.
url
, selector
, viewport
, shouldRunInHeadless
Clicks elements by their visible text content.
url
, text
, elementType
(optional), viewport
, shouldRunInHeadless
Types text into an input field by CSS selector.
url
, selector
, text
, viewport
, shouldRunInHeadless
Types text into input fields by their label text.
url
, labelText
, text
, viewport
, shouldRunInHeadless
Analyzes page to identify all interactive elements.
url
, viewport
, shouldRunInHeadless
Creates a persistent browser session for multiple operations.
sessionId
, viewport
, shouldRunInHeadless
Navigates to a URL in an existing session.
sessionId
, url
Click elements within a session.
Type text within a session.
Run accessibility scan on current page in session.
Analyze current page in session.
Close a browser session.
List all active browser sessions.
Ask the LLM to perform a scan:
Could you scan example.com for WCAG 2.1 AA compliance issues?
Focus on specific accessibility aspects:
Please check example.com for color contrast accessibility issues (cat.color).
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
Discover interactive elements:
Can you analyze example.com and tell me what interactive elements are available?
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.
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.
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.
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"
]
}
}
}
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.
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.
To add this MCP server to Claude Desktop:
1. Find your configuration file:
~/Library/Application Support/Claude/claude_desktop_config.json
%APPDATA%\Claude\claude_desktop_config.json
~/.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