mcp-a11y-service

MCP server that audits designs for WCAG 2.2 AA accessibility compliance.

Accepts two input types:

• Figma designs — via Figma MCP's get_design_context output
• Webpages — any http://, https://, or localhost URL

Both produce a markdown audit report grouped by severity, with per-violation WCAG criterion references and concrete fix recommendations.

Tools

Tool	Description
audit_webpage(url)	Launches headless Chromium, injects axe-core, returns a WCAG 2.2 AA report
audit_figma_data(design_context)	Analyzes Figma design JSON from Figma MCP's get_design_context

Prompts

Prompt	Description
audit-figma	Orchestrates the two-step flow: Figma MCP → audit_figma_data
audit-webpage	Runs audit_webpage and presents findings by severity

Requirements

• Python 3.11+
• uv or pip

Installation

pip install -r requirements.txt
playwright install chromium

axe-core is downloaded from the CDN on first run and cached locally as axe.min.js. No manual download needed.

No .env required — webpage audits run locally via Playwright, and Figma credentials live in the Figma MCP configuration.

Conda environment

This project runs inside a conda environment. Create one and install the dependencies:

conda create -n <your-env-name> python=3.11
conda activate <your-env-name>
pip install -r requirements.txt
playwright install chromium

The configs below use myenv as a placeholder — replace it with your environment name. (The author uses a personal environment called Data.)

Usage with Claude Code

Run once to register the server:

claude mcp add a11y /path/to/anaconda3/envs/myenv/bin/python -- /path/to/mcp-a11y-service/server.py

Or add it manually to your .claude/settings.json:

{
  "mcpServers": {
    "a11y": {
      "command": "/path/to/anaconda3/envs/myenv/bin/python",
      "args": ["/path/to/mcp-a11y-service/server.py"]
    }
  }
}

Usage with Cursor

1. Open Cursor Settings → MCP
2. Click Add new global MCP server
3. Add the following to your ~/.cursor/mcp.json:

{
  "mcpServers": {
    "a11y": {
      "command": "/path/to/anaconda3/envs/myenv/bin/python",
      "args": ["/path/to/mcp-a11y-service/server.py"]
    }
  }
}

4. Restart Cursor. The a11y server will appear under Available Tools in the MCP panel.

Usage with VS Code

1. Install the Claude extension if you haven't already
2. Open your VS Code settings.json (Cmd+Shift+P → Preferences: Open User Settings (JSON))
3. Add:

{
  "claude.mcpServers": {
    "a11y": {
      "command": "/path/to/anaconda3/envs/myenv/bin/python",
      "args": ["/path/to/mcp-a11y-service/server.py"]
    }
  }
}

4. Reload VS Code.

Running Tests

pytest