光标 A11y MCP

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

特征

• 在任何 URL 或本地开发服务器上运行可访问性测试

• 由 axe-core 提供支持，可进行全面的可访问性测试

• 提供详细的违规报告，包括：

  • 影响程度

  • 问题描述

  • 帮助文本和文档链接

  • 受影响的 HTML 元素

  • 故障摘要

Related MCP server: Web Accessibility MCP Server

项目结构

• src/ - MCP 服务器和可访问性测试工具的源代码

• test-site/ - 一个用于测试的故意存在可访问性问题的 React 应用程序

• build/ ——源代码的编译版本

安装

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

用法

启动 MCP 服务器

运行测试站点

测试站点的网址为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 的 MCP 服务器设置：

1. 打开光标设置（⌘ + ,）

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替换为 build 文件夹中 index.js 文件的绝对路径。）

4. 单击Add

5. 可访问性测试工具现在可在 Cursor 的 Composer 中使用

在 Composer 中的使用

要使用 Cursor Composer 中的可访问性测试工具：

1. 在你的终端中运行：

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

2. 在 Cursor 的 Composer 中，输入use a11y tool

3. Composer 将提示您运行该工具

4. 运行该工具后，您将看到响应中的可访问性违规，以及修复违规的代码操作

5. Composer 可能会提示您再次使用该工具来确认违规行为是否已修复

执照

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

版本

当前版本：2.0.1