Cursor A11y MCP

一个模型上下文协议 (MCP) 服务器，为 AI 代理提供可访问性测试功能。此工具使用 axe-core 和 Puppeteer 帮助识别 Web 应用程序中的可访问性问题。

<a href="https://glama.ai/mcp/servers/mik2l7a1tw"> <img width="380" height="200" src="https://glama.ai/mcp/servers/mik2l7a1tw/badge" alt="Cursor A11y MCP server" /> </a>

功能

• 在任何 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 启动测试站点

2. 在 Cursor 的 Composer 中，键入 use a11y tool
3. Composer 将提示您运行该工具
4. 运行该工具后，您将在响应中看到可访问性违规，以及修复违规的代码操作
5. Composer 可能会提示您再次使用该工具以确认违规已修复

许可证

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE 文件。

版本

当前版本：2.0.1