a11ymcp
An MCP server that enables LLMs to perform web accessibility testing against WCAG standards using Deque Axe-core API and Puppeteer.
An MCP server that enables LLMs to perform web accessibility testing against WCAG standards using Deque Axe-core API and Puppeteer.
A11y MCP is an MCP (Model Context Protocol) server that gives LLMs access to web accessibility testing APIs.
This server uses the Deque Axe-core API and Puppeteer to allow LLMs to analyze web content for WCAG compliance and identify accessibility issues.
NOTE: This is not an official MCP server from Deque Labs.
Leave a star if you enjoyed the project! ?
To use this server with Claude Desktop, you need to configure it in the MCP settings:
For macOS:
Edit the file at ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": [
"-y",
"a11y-mcp-server"
]
}
}
}
For Windows:
Edit the file at %APPDATA%Claudesettingsclaude_mcp_settings.json
For Linux:
Edit the file at ~/.config/Claude/settings/claude_mcp_settings.json
Replace /path/to/axe-mcp-server/build/index.js
with the actual path to your compiled server file.
Tests a URL for accessibility issues.
Parameters:
- url
(required): The URL of the web page to test
- tags
(optional): Array of WCAG tags to test against (e.g., ["wcag2aa"])
Example
{
"url": "https://example.com",
"tags": ["wcag2aa"]
}
Tests an HTML string for accessibility issues. Parameters:
Example
{
"html": "<div><img src= image.jpg ></div>",
"tags": ["wcag2aa"]
}
Get information about available accessibility rules with optional filtering.
Check if a foreground and background color combination meets WCAG contrast requirements.
Parameters:
foreground
(required): Foreground color in hex format (e.g., "#000000")background
(required): Background color in hex format (e.g., "#FFFFFF")fontSize
(optional): Font size in pixels (default: 16)isBold
(optional): Whether the text is bold (default: false)Example
{
"foreground": "#777777",
"background": "#EEEEEE",
"fontSize": 16,
"isBold": false
}
Check if ARIA attributes are used correctly in HTML.
Parameters:
html
(required): HTML content to test for ARIA attribute usageExample
{
"html": "<div role= button aria-pressed= false >Click me</div>"
}
Check if content forces a specific orientation.
Parameters:
html
(required): HTML content to test for orientation lock issuesExample
{
"html": "<html><head><meta name= viewport content= width=device-width, orientation=portrait ></head><body>Content</body></html>"
}
The server returns accessibility test results in a structured JSON format:
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "<div style="color: #aaa; background-color: #eee;">Low contrast text</div>",
"target": ["div"],
"failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
}
]
}
],
"passes": 1,
"incomplete": 0,
"inapplicable": 2,
"timestamp": "2025-04-25T16:45:33.655Z",
"url": "about:blank",
"testEngine": {
"name": "axe-core",
"version": "4.10.3"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
"windowWidth": 800,
"windowHeight": 600,
"orientationAngle": 0,
"orientationType": "portrait-primary"
}
}
[
{
"description": "Test a webpage for accessibility issues using Axe-core",
"name": "test_accessibility",
"parameters": {
"additionalProperties": false,
"properties": {
"tags": {
"default": [
"wcag2aa"
],
"description": "Optional array of accessibility tags to test (e.g., wcag2a, wcag2aa, wcag21a)",
"items": {
"type": "string"
},
"type": "array"
},
"url": {
"description": "URL of the webpage to test",
"type": "string"
}
},
"required": [
"url"
],
"type": "object"
}
},
{
"description": "Test an HTML string for accessibility issues",
"name": "test_html_string",
"parameters": {
"additionalProperties": false,
"properties": {
"html": {
"description": "HTML content to test",
"type": "string"
},
"tags": {
"default": [
"wcag2aa"
],
"description": "Optional array of accessibility tags to test (e.g., wcag2a, wcag2aa, wcag21a)",
"items": {
"type": "string"
},
"type": "array"
}
},
"required": [
"html"
],
"type": "object"
}
},
{
"description": "Get information about available accessibility rules with optional filtering",
"name": "get_rules",
"parameters": {
"additionalProperties": false,
"properties": {
"tags": {
"description": "Filter rules by these tags (e.g., wcag2a, wcag2aa, best-practice)",
"items": {
"type": "string"
},
"type": "array"
}
},
"required": null,
"type": "object"
}
},
{
"description": "Check if a foreground and background color combination meets WCAG contrast requirements",
"name": "check_color_contrast",
"parameters": {
"additionalProperties": false,
"properties": {
"background": {
"description": "Background color in various formats (e.g., #FFFFFF, #FFF, rgb(255,255,255), hsv(0,0%,100%))",
"type": "string"
},
"fontSize": {
"default": 16,
"description": "Font size in pixels",
"type": "number"
},
"foreground": {
"description": "Foreground color in various formats (e.g., #000000, #000, rgb(0,0,0), hsv(0,0%,0%))",
"type": "string"
},
"isBold": {
"default": false,
"description": "Whether the text is bold",
"type": "boolean"
}
},
"required": [
"foreground",
"background"
],
"type": "object"
}
},
{
"description": "Check if ARIA attributes are used correctly in HTML",
"name": "check_aria_attributes",
"parameters": {
"additionalProperties": false,
"properties": {
"html": {
"description": "HTML content to test for ARIA attribute usage",
"type": "string"
}
},
"required": [
"html"
],
"type": "object"
}
},
{
"description": "Check if content forces a specific orientation",
"name": "check_orientation_lock",
"parameters": {
"additionalProperties": false,
"properties": {
"html": {
"description": "HTML content to test for orientation lock issues",
"type": "string"
}
},
"required": [
"html"
],
"type": "object"
}
}
]