Cursor A11y MCP

一个提供无障碍测试功能的 Model Context Protocol (MCP) 服务器。该工具使用 axe-core 和 Puppeteer 帮助识别 Web 应用程序中的无障碍问题。

特性

• 在任何 URL 或本地开发服务器上运行无障碍测试
• 使用 axe-core 进行全面的无障碍测试
• 提供详细的违规报告，包括：
  • 影响级别
  • 问题描述
  • 帮助文本和文档链接
  • 受影响的 HTML 元素
  • 失败摘要

项目结构

• src/ - MCP 服务器和无障碍测试工具的源代码
• test-site/ - 一个带有故意设计的无障碍问题的 React 应用程序，用于测试
• build/ - 源代码的编译版本

安装

npm install

然后安装测试站点依赖项：

cd test-site
npm install
cd ..

使用

启动 MCP 服务器

npm run build
npm start

运行测试站点

npm run start:test-site

测试站点将在 http://localhost:5000 上可用。

运行无障碍测试

该工具接受两种类型的输入：

1. 要测试的完整 URL
2. 将被追加到 http://localhost:5000 的相对路径

依赖项

• @modelcontextprotocol/sdk: ^1.4.1
• puppeteer: ^24.1.1
• zod: ^3.24.1

测试站点依赖项

• react: ^18.2.0
• react-dom: ^18.2.0
• react-scripts: 5.0.1

开发

1. 在 src/ 目录中修改源代码
2. 运行 npm run build 编译更改
3. 使用 npm start 启动服务器

在 Cursor 中配置

要将此无障碍测试工具添加到 Cursor 的 MCP 服务器设置中：

1. 打开 Cursor 的设置（⌘ + ,）
2. 导航至 "Features" > "MCP Servers"
3. 添加一个新的 MCP 服务器，配置如下：
   • 名称：a11y
   • 从下拉菜单中选择 command
   • 命令：node path/to/cursor-a11y-mcp/index/file/in/build/folder
     （将 path/to/cursor-a11y-mcp/index/file/in/build/folder 替换为构建文件夹中 index.js 文件的绝对路径。）
4. 点击 Add
5. 无障碍测试工具现在可以在 Cursor 的 Composer 中使用了

在 Composer 中使用

要在 Cursor 的 Composer 中使用无障碍测试工具：

1. 在终端中运行：

npm run start:test-site

这将启动测试站点 http://localhost:5000

1. 在 Cursor 的 Composer 中输入 use a11y tool
2. Composer 会提示您运行该工具
3. 运行工具后，您会在响应中看到无障碍违规情况以及修复这些违规的代码操作
4. Composer 可能会提示您再次使用该工具以确认违规已修复

许可证

该项目根据 MIT 许可证许可 - 详情请参阅 LICENSE 文件。

版本

当前版本：2.0.1