This MCP Accessibility Scanner serves as a powerful Model Context Protocol server that enables LLMs to perform automated web accessibility testing and browser automation using Playwright and Axe-core. The server can conduct WCAG compliance checks, interact with web pages, and generate detailed accessibility reports with visual annotations.
Install the package globally using npm:
npm install -g mcp-accessibility-scanner
Add the Accessibility Scanner to VS Code using the CLI:
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"]}'
Configure Claude Desktop to use the accessibility scanner:
{
"mcpServers": {
"accessibility-scanner": {
"command": "npx",
"args": ["-y", "mcp-accessibility-scanner"]
}
}
}
The core accessibility scanning function allows comprehensive WCAG testing:
scan_page
Parameters:
violationsTag: Array of WCAG/violation tags to checkSupported Violation Tags:
wcag2a, wcag2aa, wcag2aaa, wcag21a, wcag21aa, wcag21aaa, wcag22a, wcag22aa, wcag22aaasection508cat.aria, cat.color, cat.forms, cat.keyboard, and many moreNavigate through web pages with these functions:
browser_navigate
browser_navigate_back
browser_navigate_forward
Parameters for browser_navigate:
url: The URL to navigate to (string)Interact with elements on the page:
browser_snapshot
browser_click
browser_type
browser_hover
browser_drag
browser_select_option
browser_press_key
Most interactions require element references from a snapshot. Example parameters:
browser_click: element (description), ref (element reference), doubleClick (optional)browser_type: element, ref, text, submit (optional), slowly (optional)Capture visual content from the page:
browser_take_screenshot
browser_pdf_save
Parameters for browser_take_screenshot:
raw (optional)filename (optional)element (optional)ref (optional)Manage the browser state:
browser_close
browser_resize
Parameters for browser_resize:
width: Desired width in pixelsheight: Desired height in pixelsWork with multiple browser tabs:
browser_tab_list
browser_tab_new
browser_tab_select
browser_tab_close
Get diagnostic information:
browser_console_messages
browser_network_requests
Additional useful functions:
browser_wait_for
browser_handle_dialog
browser_file_upload
Coordinate-based interaction for complex scenarios:
browser_screen_capture
browser_screen_move_mouse
browser_screen_click
browser_screen_drag
browser_screen_type
1. Navigate to example.com using browser_navigate
2. Run scan_page with violationsTag: ["wcag21aa"]
1. Use browser_navigate to go to example.com
2. Run scan_page with violationsTag: ["cat.color"]
1. Navigate to example.com with browser_navigate
2. Take a browser_snapshot to see available elements
3. Click the "Sign In" button using browser_click
4. Type "[email protected]" using browser_type
5. Run scan_page on the login page
6. Take a browser_take_screenshot to capture the final state
1. Navigate to example.com
2. Use browser_snapshot to capture all interactive elements
3. Review console messages with browser_console_messages
4. Check network activity with browser_network_requests
1. Open a new tab with browser_tab_new
2. Navigate to different pages in each tab
3. Switch between tabs using browser_tab_select
4. List all tabs with browser_tab_list
1. Navigate to a page
2. Use browser_wait_for to wait for specific text to appear
3. Interact with the dynamically loaded content
Note: Most interaction tools require element references from browser_snapshot. Always capture a snapshot before attempting to interact with page elements.
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.json2. 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