关键词

accessibility testingweb accessibilityautomated testingaxe-corepuppeteer

Cursor A11y MCP 服务器使用说明

项目简介

Cursor A11y MCP 是一个实现了 Model Context Protocol (MCP) 的服务器，它提供了一个强大的辅助功能（Accessibility，简称A11y）测试工具。该工具利用 axe-core 引擎和 Puppeteer 浏览器自动化工具，能够自动化检测网页的可访问性问题，并生成详细的违规报告，帮助开发者提升Web应用的无障碍体验。

主要功能点

  • 网页可访问性测试: 支持对指定的URL或本地开发服务器地址进行全面的可访问性测试。
  • axe-core 驱动: 采用业界领先的 axe-core 引擎，提供精准、全面的可访问性检测能力。
  • 详细违规报告: 生成包含影响程度、问题描述、帮助文档链接、受影响HTML元素和失败总结的详细违规报告，方便开发者定位和修复问题。
  • MCP 服务器: 作为一个标准的 MCP 服务器，可以与任何兼容 MCP 协议的客户端（如 Cursor 编辑器）集成，提供工具服务。

安装步骤

  1. 克隆仓库：将 GitHub 仓库克隆到本地。
  2. 安装依赖：在项目根目录下运行 'npm install' 安装项目依赖。
  3. 构建项目：运行 'npm run build' 命令编译源代码，生成构建文件。
  4. （可选）安装测试站点依赖： 如果需要运行测试站点，请进入 'test-site' 目录运行 'npm install' 安装测试站点依赖，然后返回项目根目录。

服务器配置

要将此 MCP 服务器添加到 MCP 客户端（例如 Cursor 编辑器），您需要配置服务器的启动命令。以下是配置信息示例（JSON 格式）：

{
  "servers": [
    {
      "name": "a11y",
      "command": "node <项目路径>/build/index.js"
    }
  ]
}

配置参数说明：

  • 'name': 服务器名称，例如 'a11y'，用于在 MCP 客户端中标识和调用该服务器。
  • 'command': 服务器启动命令。请将 '<项目路径>' 替换为 'cursor-a11y-mcp' 项目在您本地文件系统中的绝对路径。此命令指示 MCP 客户端运行 'node' 命令来启动 'build' 文件夹下的 'index.js' 文件，即编译后的 MCP 服务器入口文件。

重要: 请确保将 '<项目路径>/build/index.js' 替换为实际的 'index.js' 文件路径。您可以在完成构建步骤后，在项目根目录下找到 'build' 文件夹，确认 'index.js' 文件的位置，并据此修改配置中的 'command' 值。

基本使用方法

  1. 启动测试站点 (可选): 如果需要测试相对路径，请先运行测试站点 'npm run start:test-site'，它将在 'http://localhost:5000' 启动一个包含可访问性问题的示例网站。
  2. 启动 MCP 服务器: 在项目根目录下运行 'npm start' 命令启动 MCP 服务器。服务器将通过标准输入/输出 (stdio) 与 MCP 客户端通信。
  3. 在 MCP 客户端中使用:
    • 在兼容的 MCP 客户端（如 Cursor 编辑器）中，配置并添加名为 'a11y' 的 MCP 服务器。
    • 在编辑器的 Composer 或类似交互界面中，输入 'use a11y tool' 命令来调用可访问性测试工具。
    • 根据提示，输入要测试的 URL (完整 URL 或相对于 'http://localhost:5000' 的路径)。
    • 工具运行后，将在客户端界面显示详细的可访问性违规报告，以及可能的修复建议。

通过以上步骤，您就可以使用 Cursor A11y MCP 服务器提供的可访问性测试工具，提升您的 Web 应用的可访问性水平。

信息

分类

开发者工具

访问项目