## 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. 打开终端，复制并运行以下命令： ```bash npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude ``` **方法二：手动安装** 1. **克隆仓库:** ```bash git clone https://github.com/bilhasry-deriv/mcp-web-a11y cd mcp-web-a11y ``` 2. **安装依赖:** ```bash npm install ``` 3. **构建服务器:** ```bash 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` 字段中添加以下配置信息： ```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" } } } } ``` **配置参数说明:** - `"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 的可访问性。 **示例请求:** ```typescript web-a11y check_accessibility { "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" } ``` **参数说明:** - `url` (必填): 要分析的网页 URL。 - `waitForSelector` (可选): CSS 选择器，服务器会等待该选择器对应的元素出现后才开始分析。 - `userAgent` (可选): 自定义 User-Agent 字符串。 **2. 模拟色盲效果 (simulate_colorblind)** 使用 `simulate_colorblind` 工具模拟网页在不同色盲类型下的显示效果，并保存截图。 **示例请求:** ```typescript web-a11y simulate_colorblind { "url": "https://example.com", "type": "deuteranopia", "outputPath": "colorblind_simulation.png" } ``` **参数说明:** - `url` (必填): 要截图的网页 URL。 - `type` (必填): 要模拟的色盲类型，可选值包括 `protanopia` (红色盲), `deuteranopia` (绿色盲), `tritanopia` (蓝色盲)。 - `outputPath` (可选): 自定义截图保存路径和文件名。 **注意:** 请确保您已正确配置 `MCP_OUTPUT_DIR` 环境变量，以便 `simulate_colorblind` 工具能够成功保存截图。

"Web可访问性" 标签

Web Accessibility Analysis Server