Cursor A11y

一个基于axe-core和Puppeteer的网页可访问性测试工具

开发者工具法律与合规 #可访问性测试 #网页检测 #axe-core .JavaScript

评分 : 2分

下载量 : 6.2K

更新时间 : 2025-04-28

打开站点

什么是Cursor A11y MCP 服务器？

Cursor A11y MCP 是一个模型上下文协议（MCP）服务器，专为无障碍（Accessibility，简称A11y）测试设计。它利用axe-core工具分析网页是否存在无障碍问题，并通过Puppeteer模拟浏览器行为来执行测试。

如何使用Cursor A11y MCP 服务器？

只需提供目标URL或相对路径，服务器即可自动运行无障碍测试并生成报告。报告包含问题的影响等级、描述、解决方案以及受影响的HTML元素。

适用场景

适用于开发团队希望快速发现和修复网页无障碍问题的场景，尤其适合需要满足无障碍标准（如WCAG）的企业项目。

主要功能

全面无障碍测试

基于axe-core工具，覆盖多种无障碍标准（如WCAG），识别常见问题。

详细的报告

生成包含影响级别、描述、帮助文本和修复建议的报告。

支持本地开发环境

可以轻松测试本地开发中的网页，无需部署到线上。

优势

快速定位无障碍问题

支持多种浏览器环境

自动化报告生成，提升效率

局限性

可能无法完全替代人工审核

对复杂动态页面的支持有限

如何使用

安装依赖

运行npm install安装所需的依赖包。

启动MCP服务器

编译源代码并启动服务器。

测试目标网站

输入URL或相对路径开始测试。

使用案例

测试本地开发站点

在本地环境中验证无障碍问题。

远程URL测试

检测外部网站的无障碍状况。

常见问题

如何添加此工具到Cursor中？

是否支持多语言网页测试？

测试完成后如何确认问题已解决？

🚀 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

运行可访问性测试

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

要测试的完整 URL
附加到 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

开发流程

对源代码中的 src/ 目录进行修改。
运行 npm run build 编译更改。
使用 npm start 启动服务器。

在 Cursor 中配置

要在 Cursor 的 MCP 服务器设置中添加此可访问性测试工具，可按以下步骤操作：

打开 Cursor 的设置（⌘ + ,）。
浏览到“功能”>“MCP 服务器”。
添加一个新的 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 文件的绝对路径。）
点击 添加
可访问性测试工具现在将在 Cursor 的 Composer 中可用。

在 Composer 中使用

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

在终端中运行：

npm run start:test - site

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