Accessibility Scanner

🚀 MCP 可訪問性掃描儀 🔍

MCP 可訪問性掃描儀是一個模型上下文協議（MCP）服務器，藉助 Playwright 和 Axe - core 實現網頁可訪問性的自動化掃描。它能讓大型語言模型（LLMs）開展 WCAG 合規檢查、捕獲帶註釋的屏幕截圖，還能生成詳細報告，極大提升了網頁可訪問性檢測的效率。

🚀 快速開始

MCP 可訪問性掃描儀可助力大型語言模型執行網頁可訪問性檢查。使用前，需先完成安裝與配置，之後即可調用 scan_accessibility 工具掃描網頁。

✨ 主要特性

• ✅ 全面支持 WCAG 2.1/2.2 標準檢查，確保網頁符合最新的可訪問性標準。
• 🖼️ 自動捕獲屏幕截圖並突出顯示違規問題，方便直觀定位問題所在。
• 📄 生成詳細 JSON 報告，附帶修復建議，為問題修復提供指引。

📦 安裝指南

您可以根據自身需求，選擇以下任意一種方法進行安裝：

使用 npm 安裝

npm install -g mcp-accessibility-scanner

Docker 安裝

項目配備了 Dockerfile，可用於設置所有必要的依賴項，包括 Node.js v22 和 Python 3.13。

1. 構建 Docker 鏡像：

docker build -t mcp-server .

2. 運行容器：

docker run -it -e MCP_PROXY_DEBUG=true mcp-server

若想在後臺運行，可使用以下命令：

docker run -d -p 3000:3000 mcp-server

在 VS Code 中安裝

使用 VS Code CLI 在 VS Code 中安裝可訪問性掃描儀： 對於 VS Code：

code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

對於 VS Code Insiders：

code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'

📚 詳細文檔

配置

以下是 Claude Desktop 的配置示例：

{
  "mcpServers": {
    "accessibility-scanner": {
      "command": "npx",
      "args": ["-y", "mcp-accessibility-scanner"]
    }
  }
}

使用方法

掃描器提供了名為 scan_accessibility 的工具，該工具接受以下參數：

• url：要掃描的網頁 URL（必填）
• violationsTag：要檢查的可訪問性違規標籤數組（必填）
• viewport：可選對象，用於自定義視口大小
  • width：數值（默認：1920）
  • height：數值（默認：1080）
• shouldRunInHeadless：可選布爾值，用於控制無頭模式（默認：true）

注意：執行掃描時，任何可訪問性違規問題的標註屏幕截圖都會自動保存到您的下載文件夾中。

基礎用法

在 Claude 中，您可以這樣使用：

您能否掃描 example.com 以檢查與顏色對比相關的可訪問性問題？

高級用法

帶有自定義選項的高級示例：

您能否使用 1280x720 視口大小並顯示瀏覽器窗口來掃描 example.com 的可訪問性問題？

🔧 技術細節

開發

若要參與開發，可按以下步驟操作：

1. 克隆項目並進行設置：

git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install

2. 以觀察者模式啟動 TypeScript 編譯器：

npm run watch

3. 在本地測試 MCP 服務器：

npm run inspector

使用 Docker 進行開發

使用 Docker 進行開發時：

1. 構建開發鏡像：

docker build -t mcp-server-dev .

2. 通過掛載捲進行運行以實現即時代碼更改：

docker run -it -v $(pwd):/app mcp-server-dev bash

項目結構

項目文件夾包含以下內容：

• Dockerfile：用於構建 Docker 鏡像的配置文件。
• package.json：包含項目依賴項和腳本的任務清單文件。
• index.js：主應用程序入口點。
• utils/：包含各種實用工具函數的目錄。

🤝 貢獻

歡迎任何形式的貢獻！請參考項目的 CONTRIBUTING.md 文件以獲取詳細信息。

📄 許可證

該項目受 MIT License 保護。