项目介绍
网页无障碍性测试MCP服务器（A11y MCP）
A11y MCP 是一个MCP（模型上下文协议）服务器，它允许LLMs访问网页无障碍性测试API。
该服务器使用Deque Axe-core API 和 Puppeteer 来让LLMs分析网页内容以检查WCAG合规性并识别无障碍性问题。
注意：这不是Deque实验室官方发布的MCP服务器。
如果你喜欢这个项目，请给个星！🌟
功能
- 测试网页：测试任何公开URL的无障碍性问题
- 测试HTML片段：测试原始HTML字符串的无障碍性问题
- WCAG合规性测试：检查内容是否符合各种WCAG标准（2.0、2.1、2.2）
- 可定制测试：指定要测试的无障碍性标签/标准
- 规则探索：获取可用无障碍性规则的信息
- 颜色对比度分析：检查颜色组合是否符合WCAG要求
- ARIA验证：测试ARIA属性的正确使用
- 方向锁定检测：识别强制特定屏幕方向的内容
安装
要在Claude Desktop中使用此服务器，需要在MCP设置中进行配置：
对于macOS：
编辑文件'~/Library/Application Support/Claude/claude_desktop_config.json'
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": [
"-y",
"a11y-mcp-server"
]
}
}
}
对于Windows：
编辑文件%APPDATA%\Claude\settings\claude_mcp_settings.json
对于Linux：
编辑文件~/.config/Claude/settings/claude_mcp_settings.json
用实际编译后的服务器文件路径替换/path/to/axe-mcp-server/build/index.js。
可用工具
test_accessibility
测试URL的无障碍性问题。
参数：
url（必需）：要测试的网页URLtags（可选）：要测试的WCAG标签数组（例如，["wcag2aa"]）
示例
{
"url": "https://example.com",
"tags": ["wcag2aa"]
}
test_html_string
测试HTML字符串的无障碍性问题。 参数：
html（必需）：要测试的HTML内容tags（可选）：要测试的WCAG标签数组（例如，["wcag2aa"]）
示例
{
"html": "<div><img src='image.jpg'></div>",
"tags": ["wcag2aa"]
}
get_rules
获取可用无障碍性规则的信息，可选过滤。
check_color_contrast
检查前景色和背景色组合是否符合WCAG对比度要求。
参数：
foreground（必需）：前景色的十六进制格式（例如，"#000000"）background（必需）：背景色的十六进制格式（例如，"#FFFFFF"）fontSize（可选）：字体大小（默认：16像素）isBold（可选）：文本是否加粗（默认：false）
示例
{
"foreground": "#777777",
"background": "#EEEEEE",
"fontSize": 16,
"isBold": false
}
check_color_contrast
检查HTML中ARIA属性的正确使用。
参数：
html（必需）：要测试ARIA属性使用的HTML内容
示例
{
"html": "<div role='button' aria-pressed='false'>Click me</div>"
}
check_orientation_lock
检查内容是否强制特定方向。
参数：
html（必需）：要测试方向锁定问题的HTML内容
示例
{
"html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}
响应格式
服务器返回结构化的JSON格式的无障碍性测试结果：
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "确保前景色和背景色之间的对比度满足WCAG 2 AA最低对比度阈值",
"help": "元素必须满足最低颜色对比度阈值",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "<div style=\"color: #aaa; background-color: #eee;\">低对比度文本</div>",
"target": ["div"],
"failureSummary": "修复以下任意一项：元素的颜色对比度不足1.98（前景色：#aaa，背景色：#eee，字体大小：12.0pt，字体粗细：正常）"
}
]
}
],
"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": 200,
"orientationAngle": 0,
"orientationType": "portrait-primary"
}
}
依赖项
- @modelcontextprotocol/sdk
- puppeteer
- @axe-core/puppeteer
- axe-core