Cursor A11y

一個基於axe-core和Puppeteer的網頁可訪問性測試工具

開發者工具法律與合規 #可訪問性測試 #網頁檢測 #axe-core .JavaScript

評分 : 2分

下載量 : 7

更新時間 : 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 可能會提示您再次運行工具以確認違規已修復。