A
securityA
licenseA
qualityProvides web accessibility analysis and color blindness simulation using axe-core and Puppeteer, enabling detailed accessibility checks and visual simulations based on WCAG guidelines.
Last updated -
2
4
MIT License
MCP アクセシビリティ スキャナー 🔍
PlaywrightとAxe-coreを用いた自動ウェブアクセシビリティスキャンを提供するModel Context Protocol（MCP）サーバー。このサーバーにより、LLMはWCAGコンプライアンスチェック、注釈付きスクリーンショットのキャプチャ、詳細なアクセシビリティレポートの生成が可能になります。
特徴
✅ WCAG 2.1/2.2 の完全なコンプライアンスチェック
🖼️ 違反箇所を強調表示する自動スクリーンショットキャプチャ
📄 修復ガイダンス付きの詳細なJSONレポート
インストール
次のいずれかの方法でパッケージをインストールできます。
npm を使用する場合:
npm install -g mcp-accessibility-scanner
Dockerのインストール
このプロジェクトには、Node.js v22 や Python 3.13 など、必要なすべての依存関係を設定する Dockerfile が含まれています。
Docker イメージをビルドします。
docker build -t mcp-server .
コンテナを実行します。
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 Insider 向け:
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 での使用例:
Could you scan example.com for accessibility issues related to color contrast?
カスタム オプションを使用した高度な例:
Could you scan example.com for accessibility issues with a viewport of 1280x720 and show the browser window?
発達
プロジェクトのクローンを作成してセットアップします。
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 を使用した開発の場合:
開発イメージをビルドします。
docker build -t mcp-server-dev .
ライブ コード変更のためにボリューム マウントを使用して実行します。
docker run -it -v $(pwd):/app -p 3000:3000 -e MCP_PROXY_DEBUG=true mcp-server-dev
プロジェクト構造
├── src/ # Source code
│ ├── index.ts # MCP server setup and tool definitions
│ └── scanner.ts # Core scanning functionality
├── build/ # Compiled JavaScript output
├── Dockerfile # Docker configuration for containerized setup
├── package.json # Project configuration and dependencies
└── tsconfig.json # TypeScript configuration
ライセンス
マサチューセッツ工科大学
Related MCP Servers
- AsecurityAlicenseAqualityProvides accessibility testing capabilities through CLI, helping identify accessibility issues in web applications using axe-core and Puppeteer.Last updated -12MIT License
- AsecurityAlicenseAqualityAn MCP (Model Context Protocol) server for performing accessibility audits on webpages using axe-core. Use the results in an agentic loop with your favorite AI assistants (Cline/Cursor/GH Copilot) and let them fix a11y issues for you!Last updated -223829Mozilla Public License 2.0
- AsecurityAlicenseAqualityAn MCP server that enables LLMs to perform web accessibility testing against WCAG standards using Deque Axe-core API and Puppeteer.Last updated -66639MIT License