无障碍MCP
一个MCP服务器， enables语言模型通过Deque Axe-core API和Puppeteer依据WCAG标准进行网页可访问性测试。 （优化后）： 一个MCP服务器，使大型语言模型能够通过Deque Axe-core API和Puppeteer按照WCAG标准执行网页无障碍测试。
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"a11y-accessibility": {
"args": [
"-y",
"a11y-mcp-server"
],
"command": "npx"
}
}
}可用工具 （6 个）
该服务在 MCP 协议中暴露的工具，AI 可按需调用
test_accessibility
Test a webpage for accessibility issues using Axe-core
该工具无需必填参数，直接调用即可
test_html_string
Test an HTML string for accessibility issues
该工具无需必填参数，直接调用即可
get_rules
Get information about available accessibility rules with optional filtering
该工具无需必填参数，直接调用即可
check_color_contrast
Check if a foreground and background color combination meets WCAG contrast requirements
该工具无需必填参数，直接调用即可
check_aria_attributes
Check if ARIA attributes are used correctly in HTML
该工具无需必填参数，直接调用即可
check_orientation_lock
Check if content forces a specific orientation
该工具无需必填参数，直接调用即可
服务介绍
Web 可访问性测试 MCP 服务器 (A11y MCP)
A11y MCP 是一个 MCP（模型上下文协议）服务器，它使 LLMs 能够访问网页可访问性测试 API。
该服务器使用 Deque Axe-core API 和 Puppeteer 来允许 LLMs 分析网页内容是否符合 WCAG 标准，并识别可访问性问题。
注意：这不是来自 Deque Labs 的官方 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%Claudesettingsclaude_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": "",
"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_aria_usage
检查 HTML 中 ARIA 属性是否被正确使用。
参数：
html（必需）：要测试 ARIA 属性使用的 HTML 内容
示例
{
"html": "Click me"
}
check_orientation_lock
检查内容是否强制特定的方向。
参数：
html（必需）：要测试方向锁定问题的 HTML 内容
示例
{
"html": "<meta name= viewport content= width=device-width, orientation=portrait >Content"
}
响应格式
服务器以结构化的 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;">低对比度文本",
"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": 600,
"orientationAngle": 0,
"orientationType": "portrait-primary"
}
}## 依赖项
- @modelcontextprotocol/sdk
- puppeteer
- @axe-core/puppeteer
- axe-core
