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.
You can install the package globally using npm:
npm install -g mcp-accessibility-scanner
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
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"]}'
For Claude Desktop, add this configuration:
{
"mcpServers": {
"accessibility-scanner": {
"command": "npx",
"args": ["-y", "mcp-accessibility-scanner"]
}
}
}
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:
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.
Could you scan example.com for WCAG 2.1 AA compliance issues?
Please check example.com for color contrast accessibility issues (cat.color).
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
Can you analyze example.com and tell me what interactive elements are available?
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.
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