Web 可访问性 MCP 服务器
使用 axe-core 和 Puppeteer 提供 Web 可访问性分析功能的 MCP（模型上下文协议）服务器。
特征
使用 axe-core 分析任何 URL 的 Web 可访问性
使用颜色矩阵模拟色盲（红色盲、绿色盲、蓝色盲）
详细报告无障碍违规行为
支持自定义用户代理和选择器
用于故障排除的调试日志记录
根据 WCAG 指南进行全面的可访问性检查
Related MCP server: MCP Accessibility Scanner
先决条件
Node.js（v14 或更高版本）
npm
安装
通过 Smithery 安装
要通过Smithery自动为 Claude Desktop 安装 Web Accessibility MCP 服务器：
npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude手动安装
克隆存储库：
git clone [repository-url]
cd mcp-web-a11y安装依赖项：
npm install构建服务器：
npm run build配置
将服务器添加到您的 MCP 设置文件（通常位于~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json ）：
{
"mcpServers": {
"web-a11y": {
"command": "node",
"args": ["/path/to/mcp-web-a11y/build/index.js"],
"disabled": false,
"autoApprove": [],
"env": {
"MCP_OUTPUT_DIR": "/path/to/output/directory"
}
}
}
}环境变量
MCP_OUTPUT_DIR：屏幕截图输出的保存目录simulate_colorblind工具所需如果未指定，则默认为相对于当前工作目录的“./output”
在 MCP 设置中配置时必须是绝对路径
用法
服务器提供了两个工具：用于分析网页可访问性的check_accessibility和用于模拟色盲的simulate_colorblind 。
工具：check_accessibility
使用 axe-core 检查给定 URL 的可访问性。
参数
url（必填）：需要分析的 URLwaitForSelector（可选）：分析前等待的 CSS 选择器userAgent（可选）：请求的自定义用户代理字符串
示例用法
<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>check_accessibility</tool_name>
<arguments>
{
"url": "https://example.com",
"waitForSelector": ".main-content",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
</arguments>
</use_mcp_tool>工具：simulate_colorblind
使用颜色矩阵变换模拟网页对不同类型色盲用户的显示方式。
色盲类型
该工具支持三种类型的色盲模拟：
红色盲（红盲） - 使用矩阵：
0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758绿色盲（绿盲） - 使用矩阵：
0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7蓝色盲（蓝盲） - 使用矩阵：
0.95, 0.05, 0 0, 0.433, 0.567 0, 0.475, 0.525
参数
url（必填）：要捕获的 URLtype（必填）：要模拟的色盲类型（“红色盲”、“绿色盲”或“蓝色盲”）outputPath（可选）：屏幕截图输出的自定义路径userAgent（可选）：请求的自定义用户代理字符串
示例用法
<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>simulate_colorblind</tool_name>
<arguments>
{
"url": "https://example.com",
"type": "deuteranopia",
"outputPath": "colorblind_simulation.png"
}
</arguments>
</use_mcp_tool>响应格式
check_accessibility 响应
{
"url": "analyzed-url",
"timestamp": "ISO-timestamp",
"violations": [
{
"impact": "serious|critical|moderate|minor",
"description": "Description of the violation",
"help": "Help text explaining the issue",
"helpUrl": "URL to detailed documentation",
"nodes": [
{
"html": "HTML of the affected element",
"failureSummary": "Summary of what needs to be fixed"
}
]
}
],
"passes": 42,
"inapplicable": 45,
"incomplete": 3
}模拟色盲响应
{
"url": "analyzed-url",
"type": "colorblind-type",
"outputPath": "path/to/screenshot.png",
"timestamp": "ISO-timestamp",
"message": "Screenshot saved with [type] simulation"
}错误处理
该服务器包括针对常见场景的全面错误处理：
网络错误
无效的 URL
超时问题
DNS解析问题
错误响应将包含详细信息以帮助诊断问题。
发展
项目结构
mcp-web-a11y/
├── src/
│ └── index.ts # Main server implementation
├── build/ # Compiled JavaScript
├── output/ # Generated screenshots
├── package.json # Project dependencies and scripts
└── tsconfig.json # TypeScript configuration建筑
npm run build这将：
将 TypeScript 编译为 JavaScript
使输出文件可执行
将编译后的文件放在
build目录中
调试
该服务器包含详细的调试日志，可以在控制台输出中查看。其中包括：
网络请求和响应
页面加载状态
选择器等待状态
来自分析页面的任何控制台消息
颜色模拟进度
常见问题和解决方案
超时错误
增加代码中的超时值
检查网络连接
验证 URL 是否可访问
DNS解析错误
验证 URL 是否正确
检查网络连接
尝试使用 www 子域名
未找到选择器
验证选择器是否存在于页面上
等待动态内容加载
检查页面源代码中的选择器是否正确
色彩模拟问题
确保页面的颜色以支持的格式（RGB、RGBA 或 HEX）指定
检查页面是否使用动态颜色变化（可能需要额外的等待时间）
验证屏幕截图输出目录是否存在且可写
贡献
分叉存储库
创建功能分支
提交你的更改
推送到分支
创建拉取请求
执照
该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅LICENSE文件。
Resources
Looking for Admin?
Admins can modify the Dockerfile, update the server description, and track usage metrics. If you are the server author, to access the admin panel.