🚀 Cursor A11y MCP

Cursor A11y MCP 是一个模型上下文协议（MCP）服务器，具备辅助功能测试能力。它能够帮助识别网页应用程序中的可访问性问题，借助 axe - core 和 Puppeteer 开展测试工作。

🚀 快速开始

Cursor A11y MCP 可帮助你轻松对网页应用程序进行可访问性测试。以下是启动项目和运行测试的基本步骤：

安装

npm install

接着安装测试站点依赖项：

cd test-site
npm install
cd ..

启动 MCP 服务器

npm run build
npm start

运行测试站点

npm run start:test-site

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

✨ 主要特性

• 可在任意 URL 或本地开发服务器上运行辅助功能测试。
• 由 axe - core 提供支持，能进行全面的可访问性测试。
• 提供详细的违规报告，涵盖内容如下：
  • 影响级别
  • 违规描述
  • 帮助文本和文档链接
  • 受影响的 HTML 元素
  • 失败摘要

📦 安装指南

安装项目依赖

npm install

安装测试站点依赖

cd test-site
npm install
cd ..

💻 使用示例

启动 MCP 服务器

npm run build
npm start

运行测试站点

npm run start:test-site

运行可访问性测试

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

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

📚 详细文档

项目结构

• src/ - MCP 服务器和辅助功能测试工具的源代码。
• test - site/ - 一个带有故意可访问性问题的 React 应用程序，用于测试。
• build/ - 源代码的编译版本。

依赖项

项目依赖

• @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. 浏览到“功能”>“MCP 服务器”。
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. 点击 添加
5. 可访问性测试工具现在将在 Cursor 的 Composer 中可用。

在 Composer 中使用

在 Cursor 的 Composer 中使用可访问性测试工具，步骤如下：

1. 在终端中运行：

npm run start:test - site

这将启动测试站点，地址为 http://localhost:5000。 2. 在 Cursor 的 Composer 中输入 use a11y tool。 3. Composer 会提示您运行该工具。 4. 运行工具后，您将在响应中看到可访问性违规，并显示修复违规的代码操作项。 5. Composer 可能会提示您再次运行工具以确认违规已修复。

📄 许可证

该项目在 MIT License 下许可 - 有关详细信息，请参阅 LICENSE 文件。

版本

当前版本：2.0.1