Web Accessibility MCP Server

Web Accessibility MCP Server

site icon
2025.03.11 1
JavaScript网页可访问性分析色盲模拟WCAG 合规性检查浏览器自动化开发效率
Web Accessibility MCP Server 是一个基于 Model Context Protocol (MCP) 的服务,专注于网页可访问性分析。它利用 axe-core 和 Puppeteer 提供强大的网页可访问性检查功能,包括检测违反 WCAG 指南的问题,以及模拟不同类型的色盲视觉。该服务适用于开发者和设计师,帮助他们创建更具包容性的网页体验。
View on GitHub

Overview

基本能力

产品定位

Web Accessibility MCP Server 是一个专注于网页可访问性分析的 MCP 服务,旨在帮助开发者和设计师识别和解决网页中的可访问性问题。

核心功能

  • 使用 axe-core 分析任何 URL 的网页可访问性
  • 模拟色盲视觉(红色盲、绿色盲、蓝色盲)
  • 提供详细的可访问性违规报告
  • 支持自定义用户代理和选择器
  • 基于 WCAG 指南的全面可访问性检查
  • 调试日志记录

适用场景

  • 网页开发过程中的可访问性测试
  • 网站质量保证和审计
  • 设计师验证色彩方案对不同色盲用户的可见性
  • 教育目的,了解网页可访问性标准

工具列表

  1. check_accessibility
  2. 能力:分析给定 URL 的可访问性
  3. 参数:URL(必填)、等待选择器(可选)、用户代理(可选)

  4. simulate_colorblind

  5. 能力:模拟色盲视觉并生成截图
  6. 参数:URL(必填)、色盲类型(必填)、输出路径(可选)、用户代理(可选)

常见问题解答

  1. 超时错误
  2. 增加代码中的超时值
  3. 检查网络连接
  4. 验证 URL 是否可访问

  5. DNS 解析错误

  6. 验证 URL 是否正确
  7. 检查网络连接
  8. 尝试使用 www 子域名

  9. 选择器未找到

  10. 验证选择器是否存在于页面上
  11. 等待动态内容加载
  12. 检查页面源代码中的正确选择器

  13. 颜色模拟问题

  14. 确保页面颜色以支持的格式指定(RGB、RGBA 或 HEX)
  15. 检查页面是否使用动态颜色变化(可能需要额外等待时间)
  16. 验证截图输出目录是否存在且可写

使用教程

使用依赖

  • Node.js (v14 或更高版本)
  • npm

安装教程

通过 Smithery 安装

npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

手动安装

  1. 克隆仓库:
git clone [repository-url]
cd mcp-web-a11y
  1. 安装依赖:
npm install
  1. 构建服务器:
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 设置中配置时必须使用绝对路径

调试方式

服务器包含详细的调试日志记录,可以在控制台输出中观察: - 网络请求和响应 - 页面加载状态 - 选择器等待状态 - 分析页面的任何控制台消息 - 颜色模拟进度

运行服务器后,观察控制台输出以获取调试信息。

许可证

该项目遵循 MIT 开源许可条款,请参阅 MIT 了解完整条款。