Accessibility Scanner

🚀 MCP 可アクセシビリティスキャナー 🔍

このモデルコンテキストプロトコル（MCP）サーバーは、Playwright と Axe-core を使用して、自動化されたウェブページのアクセシビリティスキャンを提供します。このサーバーにより、大規模言語モデル（LLMs）は WCAG コンプライアンスチェックを実行し、注釈付きのスクリーンショットを取得し、詳細なレポートを生成することができます。

✨ 主な機能

✅ WCAG 2.1/2.2 標準チェックを全面的にサポート
🖼️ 自動的にスクリーンショットを取得し、違反箇所を強調表示
📄 詳細な JSON レポートを生成し、修正提案を付属

📦 インストール

以下のいずれかの方法を使用してインストールできます。

npm を使用する場合

npm install -g mcp-accessibility-scanner

Docker を使用する場合

このプロジェクトには、Node.js v22 と Python 3.13 を含むすべての必要な依存関係を設定するための Dockerfile が含まれています。

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 で VS Code CLI を使用してアクセシビリティスキャナーをインストールします。

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 のアクセシビリティ問題をスキャンできますか？

開発

プロジェクトをクローンして設定します。

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

TypeScript コンパイラをウォッチモードで起動します。

npm run watch

ローカルで 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 の保護を受けています。