Cursor A11y

🚀 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