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

PlaywrightとAxe-coreを用いた自動ウェブアクセシビリティスキャンを提供するModel Context Protocol（MCP）サーバー。このサーバーにより、LLMはWCAGコンプライアンスチェック、注釈付きスクリーンショットのキャプチャ、詳細なアクセシビリティレポートの生成が可能になります。

特徴

✅ WCAG 2.1/2.2 の完全なコンプライアンスチェック
🖼️ 違反箇所を強調表示する自動スクリーンショットキャプチャ
📄 修復ガイダンス付きの詳細なJSONレポート

Related MCP server: Cursor A11y MCP

インストール

次のいずれかの方法でパッケージをインストールできます。

npm を使用する場合:

Dockerのインストール

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

1. Docker イメージをビルドします。

2. コンテナを実行します。

バックグラウンドで実行することもできます。

VS Codeでのインストール

VS Code CLI を使用して、VS Code にアクセシビリティ スキャナーをインストールします。

VS Codeの場合:

VS Code Insider 向け:

構成

Claude Desktop の構成は次のとおりです。

使用法

スキャナーは、以下を受け入れる単一のツールscan_accessibilityを公開します。

• url : スキャンするウェブページのURL（必須）

• violationsTag : チェックするアクセシビリティ違反タグの配列（必須）

• viewport : ビューポートのサイズをカスタマイズするためのオプションのオブジェクト

  • width : 数値 (デフォルト: 1920)

  • height : 数値 (デフォルト: 1080)

• shouldRunInHeadless : ヘッドレスモードを制御するためのオプションのブール値（デフォルト: true）

注: スキャンを実行すると、アクセシビリティ違反を強調表示した注釈付きのスクリーンショットが自動的にダウンロード フォルダーに保存されます。

Claude での使用例:

カスタム オプションを使用した高度な例:

発達

プロジェクトのクローンを作成してセットアップします。

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

MCP サーバーをローカルでテストします。

Docker開発

Docker を使用した開発の場合:

1. 開発イメージをビルドします。

2. ライブ コード変更のためにボリューム マウントを使用して実行します。

プロジェクト構造

ライセンス

マサチューセッツ工科大学