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_contextoutput - Webpages — any
http://,https://, orlocalhostURL
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
myenvas a placeholder — replace it with your environment name.(The author uses a personal environment calledData.)
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
- Open Cursor Settings → MCP
- Click Add new global MCP server
- 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"]
}
}
}
- Restart Cursor. The
a11yserver will appear under Available Tools in the MCP panel.
Usage with VS Code
- Install the Claude extension if you haven't already
- Open your VS Code
settings.json(Cmd+Shift+P→ Preferences: Open User Settings (JSON)) - Add:
{
"claude.mcpServers": {
"a11y": {
"command": "/path/to/anaconda3/envs/myenv/bin/python",
"args": ["/path/to/mcp-a11y-service/server.py"]
}
}
}
- Reload VS Code.
Running Tests
pytest