Web 可访问性 MCP 服务器

使用 axe-core 和 Puppeteer 提供 Web 可访问性分析功能的 MCP（模型上下文协议）服务器。

特征

• 使用 axe-core 分析任何 URL 的 Web 可访问性
• 使用颜色矩阵模拟色盲（红色盲、绿色盲、蓝色盲）
• 详细报告无障碍违规行为
• 支持自定义用户代理和选择器
• 用于故障排除的调试日志记录
• 根据 WCAG 指南进行全面的可访问性检查

先决条件

• Node.js（v14 或更高版本）
• npm

安装

通过 Smithery 安装

要通过Smithery自动为 Claude Desktop 安装 Web Accessibility MCP 服务器：

手动安装

1. 克隆存储库：

2. 安装依赖项：

3. 构建服务器：

配置

将服务器添加到您的 MCP 设置文件（通常位于~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json ）：

环境变量

• MCP_OUTPUT_DIR ：屏幕截图输出的保存目录
  • simulate_colorblind工具所需
  • 如果未指定，则默认为相对于当前工作目录的“./output”
  • 在 MCP 设置中配置时必须是绝对路径

用法

服务器提供了两个工具：用于分析网页可访问性的check_accessibility和用于模拟色盲的simulate_colorblind 。

工具：check_accessibility

使用 axe-core 检查给定 URL 的可访问性。

参数

• url （必填）：需要分析的 URL
• waitForSelector （可选）：分析前等待的 CSS 选择器
• userAgent （可选）：请求的自定义用户代理字符串

示例用法

工具：simulate_colorblind

使用颜色矩阵变换模拟网页对不同类型色盲用户的显示方式。

色盲类型

该工具支持三种类型的色盲模拟：

1. 红色盲（红盲） - 使用矩阵：
   0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758
2. 绿色盲（绿盲） - 使用矩阵：
   0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7
3. 蓝色盲（蓝盲） - 使用矩阵：
   0.95, 0.05, 0 0, 0.433, 0.567 0, 0.475, 0.525

参数

• url （必填）：要捕获的 URL
• type （必填）：要模拟的色盲类型（“红色盲”、“绿色盲”或“蓝色盲”）
• outputPath （可选）：屏幕截图输出的自定义路径
• userAgent （可选）：请求的自定义用户代理字符串

示例用法

响应格式

check_accessibility 响应

模拟色盲响应

错误处理

该服务器包括针对常见场景的全面错误处理：

• 网络错误
• 无效的 URL
• 超时问题
• DNS解析问题

错误响应将包含详细信息以帮助诊断问题。

发展

项目结构

建筑

这将：

1. 将 TypeScript 编译为 JavaScript
2. 使输出文件可执行
3. 将编译后的文件放在build目录中

调试

该服务器包含详细的调试日志，可以在控制台输出中查看。其中包括：

• 网络请求和响应
• 页面加载状态
• 选择器等待状态
• 来自分析页面的任何控制台消息
• 颜色模拟进度

常见问题和解决方案

1. 超时错误
   • 增加代码中的超时值
   • 检查网络连接
   • 验证 URL 是否可访问
2. DNS解析错误
   • 验证 URL 是否正确
   • 检查网络连接
   • 尝试使用 www 子域名
3. 未找到选择器
   • 验证选择器是否存在于页面上
   • 等待动态内容加载
   • 检查页面源代码中的选择器是否正确
4. 色彩模拟问题
   • 确保页面的颜色以支持的格式（RGB、RGBA 或 HEX）指定
   • 检查页面是否使用动态颜色变化（可能需要额外的等待时间）
   • 验证屏幕截图输出目录是否存在且可写

贡献

1. 分叉存储库
2. 创建功能分支
3. 提交你的更改
4. 推送到分支
5. 创建拉取请求

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅LICENSE文件。