AI导哈

无障碍测试工具

一个基于axe-core和Puppeteer的无障碍测试工具，用于识别Web应用中的无障碍问题。

  • by westsideori
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 westsideori/cursor-a11y-mcp

使用说明

光标A11y MCP

提供可访问性测试功能的模型上下文协议（MCP）服务器。该工具使用axe-core和Puppeteer帮助识别web应用程序中的可访问性问题。

特性

  • 在任何URL或本地开发服务器上运行可访问性测试
  • 由斧头核心提供动力，进行全面的可访问性测试
  • 提供详细的违规报告，包括：
    • 冲击水平
    • 问题描述
    • 帮助文本和文档链接
    • 受影响的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的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's Composer中的可访问性测试工具，请执行以下操作：

  1. 在终端中运行：
npm run start:test-site

这将在以下时间开始测试现场 http://localhost:5000

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

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

版本

当前版本：2.0.1

相关 MCP