Web Accessibility

The Web Accessibility MCP Server analyzes web pages for WCAG conformance using axe-core and can simulate color vision deficiencies to reveal accessibility issues. It provides detailed violation reports and supports customization for user agents and selectors, making accessibility testing repeatable and easy to automate within your MCP client workflows.

How to use

You use this server through an MCP client by selecting the web-a11y server and choosing one of its built-in tools. The two available tools are check_accessibility for analyzing a page’s accessibility and simulate_colorblind for visualizing how a page would appear to users with common color vision deficiencies.

Tool: check_accessibility lets you scan a URL and receive a report of accessibility violations detected with axe-core. You can optionally wait for a specific element to appear and set a custom user agent for the request.

Tool: simulate_colorblind applies color matrix transformations to a page screenshot to approximate how colors render for protanopia, deuteranopia, and tritanopia. Provide the URL, select the type of color blindness to simulate, and optionally specify an output path for the resulting image.

Typical workflow:

• Choose the web-a11y server in your MCP client
• Run check_accessibility with the target URL and optional waitForSelector or userAgent
• Or run simulate_colorblind with the target URL and the desired color blindness type, and save the screenshot to a specified path

How to install

Prerequisites you need on your machine or development environment: Node.js version 14 or higher and npm.

Option 1: Install automatically via Smithery
- Run: `npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

Option 2: Manual installation

• Clone the repository
• Install dependencies
• Build the server

git clone [repository-url]
cd mcp-web-a11y

npm install

npm run build

Configuration and running

Configure the MCP settings to load the web-a11y server. The following example starts the server as a local process using Node and points to the built entry file. It also defines where to store output artifacts.

{
  "mcpServers": {
    "web-a11y": {
      "command": "node",
      "args": ["/path/to/mcp-web-a11y/build/index.js"],
      "disabled": false,
      "autoApprove": [],
      "env": {
        "MCP_OUTPUT_DIR": "/path/to/output/directory"
      }
    }
  }
}

Environment variables

The MCP_OUTPUT_DIR variable defines where to store output artifacts like screenshots. It is required for colorblind simulations. If not provided, the default is relative to the current working directory, but you should supply an absolute path in MCP settings.

Usage examples

Example usage for checking accessibility of a page:

<use_mcp_tool>
<server_name>web-a11y</server_name>
<tool_name>check_accessibility</tool_name>
<arguments>
{
  "url": "https://example.com",
  "waitForSelector": ".main-content",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
</arguments>
</use_mcp_tool>

Example usage for simulating color blindness and saving a screenshot:

<use_mcp_tool>
<server_name>web-a11y</server_name>
<tool_name>simulate_colorblind</tool_name>
<arguments>
{
  "url": "https://example.com",
  "type": "deuteranopia",
  "outputPath": "colorblind_simulation.png"
}
</arguments>
</use_mcp_tool>

Reports and results

check_accessibility returns a structured report detailing violations with severity, descriptions, help text, and affected DOM nodes. simulate_colorblind returns the path to the generated screenshot and metadata about the color blindness type applied.

Troubleshooting and notes

If you encounter timeouts or DNS errors, verify the target URL is reachable and consider increasing any client-side timeouts. For selector-related issues, ensure the target element exists or adjust the waitForSelector value. For colorblind simulations, confirm that the page colors are expressed in supported formats and that the output directory is writable.

Security and maintenance

Keep Node.js up to date and maintain npm dependencies. Run the build step after updating source files to ensure the server runs the latest code. Limit access to the MCP server in shared environments and log debug information judiciously to avoid exposing sensitive page content.

Available tools

check_accessibility

Analyzes a given URL for accessibility issues using axe-core and returns a structured report of violations, passes, and inapplicable elements.

simulate_colorblind

Simulates how a webpage appears under different color vision deficiencies (protanopia, deuteranopia, tritanopia) using color matrices and outputs a resulting screenshot.