关键词

Web可访问性色盲模拟辅助功能网页分析WCAG

Web Accessibility Analysis Server 使用说明

项目简介

Web Accessibility Analysis Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，它利用 axe-core 和 Puppeteer 技术，为大型语言模型 (LLM) 客户端提供 Web 可访问性分析能力。通过此服务器，LLM 可以自动化地检测网页的 WCAG 合规性问题，并模拟不同类型的色盲效果，从而辅助开发者创建更易用、更友好的 Web 应用。

主要功能点

  • Web 可访问性检测：使用 axe-core 引擎分析指定 URL 的可访问性问题，并生成详细的违规报告。
  • 色盲模拟：模拟三种常见的色盲类型（红色盲、绿色盲、蓝色盲）在网页上的视觉效果，并生成屏幕截图。
  • 自定义配置：支持设置自定义 User-Agent 和 CSS 选择器，以适应不同的网页分析需求。
  • 详细报告：可访问性检测报告包含违规问题的描述、影响程度、帮助信息和相关 HTML 代码片段。
  • 错误处理：提供全面的错误处理机制，帮助用户诊断和解决网络、URL 或配置问题。

安装步骤

方法一：通过 Smithery 安装 (Claude 客户端推荐)

如果您使用 Claude 客户端，可以通过 Smithery 快速安装：

  1. 打开终端，复制并运行以下命令： 
    npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

方法二：手动安装

  1. 克隆仓库: 
    git clone https://github.com/bilhasry-deriv/mcp-web-a11y
cd mcp-web-a11y
  2. 安装依赖: 
    npm install
  3. 构建服务器: 
    npm run build

服务器配置

要将 Web Accessibility Analysis Server 添加到您的 MCP 客户端，您需要编辑 MCP 配置文件。对于 Claude 客户端，配置文件通常位于：'~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json'。

在 'mcpServers' 字段中添加以下配置信息：

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

配置参数说明:

  • '"web-a11y"': 服务器名称，您可以自定义，用于在 MCP 客户端中引用。
  • '"command": "node"': 启动服务器的命令，这里使用 Node.js 运行环境。
  • '"args": ["/path/to/mcp-web-a11y/build/index.js"]': 启动命令的参数，指向服务器构建后的入口文件 'index.js'。请将 '/path/to/mcp-web-a11y' 替换为您实际的仓库路径。
  • '"disabled": false': 设置为 'false' 启用该服务器。
  • '"autoApprove": []': 自动批准的工具列表，默认为空。
  • '"env": { "MCP_OUTPUT_DIR": "/path/to/output/directory" }': 环境变量配置。
    • '"MCP_OUTPUT_DIR"': 请将 '/path/to/output/directory' 替换为您希望保存屏幕截图的绝对路径。 该变量用于 'simulate_colorblind' 工具，指定截图的保存目录。如果未配置，默认保存到服务器工作目录下的 './output' 文件夹。请务必使用绝对路径，否则可能导致 MCP 客户端无法正确找到截图。

基本使用方法

配置完成后，您可以在支持 MCP 协议的 LLM 客户端中使用以下工具：

1. 检测网页可访问性 (check_accessibility)

使用 'check_accessibility' 工具分析指定 URL 的可访问性。

示例请求:

<use_mcp_tool>
<server_name>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>

参数说明:

  • 'url' (必填): 要分析的网页 URL。
  • 'waitForSelector' (可选): CSS 选择器，服务器会等待该选择器对应的元素出现后才开始分析。
  • 'userAgent' (可选): 自定义 User-Agent 字符串。

2. 模拟色盲效果 (simulate_colorblind)

使用 'simulate_colorblind' 工具模拟网页在不同色盲类型下的显示效果，并保存截图。

示例请求:

<use_mcp_tool>
<server_name>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>

参数说明:

  • 'url' (必填): 要截图的网页 URL。
  • 'type' (必填): 要模拟的色盲类型，可选值包括 'protanopia' (红色盲), 'deuteranopia' (绿色盲), 'tritanopia' (蓝色盲)。
  • 'outputPath' (可选): 自定义截图保存路径和文件名。

注意: 请确保您已正确配置 'MCP_OUTPUT_DIR' 环境变量，以便 'simulate_colorblind' 工具能够成功保存截图。

信息

分类

开发者工具

访问项目