AI导哈

网页无障碍分析服务器

一个基于MCP协议的服务器，提供使用axe-core和Puppeteer进行网页无障碍分析的能力，包括色彩盲模拟和WCAG合规性检查。

  • by bilhasry-deriv
  • JavaScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 bilhasry-deriv/mcp-web-a11y

使用说明

Web可访问性MCP服务器

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

特性

  • 使用axe core分析任何URL的网络可访问性
  • 使用颜色矩阵模拟色盲（前斜视、后斜视、三斜视）
  • 无障碍违规的详细报告
  • 支持自定义用户代理和选择器
  • 调试日志用于故障排除
  • 基于WCAG指南的全面无障碍检查

先决条件

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

安装

通过Smithery安装

通过以下方式自动安装克劳德桌面的Web辅助功能MCP服务器 史密瑟里:

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 工具
    • 如果未指定，则默认为“”。/相对于当前工作目录的输出
    • 在MCP设置中配置时必须是绝对路径

用法

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

工具：检查_可访问性

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

参数

  • url （必填）：要分析的URL
  • waitForSelector （可选）：分析前等待的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>

工具：模拟_色盲

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

色盲类型

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

  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 （必填）：要模拟的色盲类型（“色盲”、“deuteranopia”或“三色盲”）
  • 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_可访问性响应

{
  "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

这将：

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

调试

服务器包括可以在控制台输出中观察到的详细调试日志记录。这包括：

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

常见问题及解决方法

  1. 超时错误

    • 增加代码中的超时值
    • 检查网络连接
    • 验证URL是否可访问

  2. DNS解析错误

    • 验证URL是否正确
    • 检查网络连接
    • 尝试使用www子域

  3. 未找到选择器

    • 验证页面上是否存在选择器
    • 等待动态内容加载
    • 检查页面源中的选择器是否正确

  4. 颜色模拟问题

    • 确保页面的颜色以支持的格式（RGB、RGBA或HEX）指定
    • 检查页面是否使用动态颜色更改（可能需要额外的等待时间）
    • 验证屏幕截图输出目录是否存在且可写

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 提交您的更改
  4. 推到分支
  5. 创建拉取请求

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

相关 MCP