A11y Feedback MCP

コーディングエージェントとデザインエージェントに、「WCAG に従う」という単なるリマインダーではなく、実際のアクセシビリティフィードバックループを提供します。

a11y-feedback-mcp は Chromium でインターフェースをレンダリングし、axe-core を実行して、あらゆる Model Context Protocol クライアントに実用的なエビデンス（違反したルール、影響度、CSS セレクター、DOM スニペット、計算済みスタイル、バウンディングボックス、修正手順、数学的に合格するコントラスト候補）を返します。

Codex と Claude Code で直接動作します。Claude Design の場合、確実なワークフローは、Claude Code を Claude Design の MCP サーバーとこのサーバーの両方に接続し、生成された HTML またはライブプレビューを監査して、修正をデザインワークフローに送り返すことです。

これは自動テスト支援ツールであり、WCAG 認証サービスではありません。意図的に不完全なチェックを報告し、キーボード、フォーカス、スクリーンリーダー、ズーム、モーション、認知、コンテンツ品質については人間によるテストを必要とします。

「ライブフィードバック」の意味

flowchart TD
    A["Agent creates or changes UI"] --> B["Render at target viewport"]
    B --> C["Run axe + contrast analysis"]
    C --> D["Return evidence and correction"]
    D --> E["Agent proposes or applies code fix"]
    E --> F["Re-run same audit"]
    F --> G["Human checks incomplete behavior"]

このサーバーは読み取り専用です。プロジェクトを黙って編集することはありません。接続されたエージェントは、エビデンスを使ってスコープを絞った変更を行い、監査を再実行して検証します。

Related MCP server: Accessibility MCP Server

ツール

すべてのツールは読み取り専用として注釈付けされています。サーバーは accessibility-fix-loop プロンプトも公開します。

標準プロファイル

監査ツールは wcag2a、wcag2aa、wcag2aaa、wcag21aa、wcag21aaa、wcag22aa、wcag22aaa、best-practice をサポートしています。AA プロファイルには必須の A および AA 基準がすべて含まれ、AAA プロファイルには A、AA、AAA が含まれます。W3C が最新の WCAG バージョンを推奨し、一般方針としてサイト全体の AAA を要求することに注意を促しているため、wcag22aa がデフォルトのままです。AAA は明示的な拡張ターゲットとして使用し、基準レベルの進捗状況を報告してください。

axe マッピングは 部分的な自動カバレッジ を意味し、完全な達成基準がテストされたことを意味するものではありません。get_wcag_checklist は、WCAG 2.2 AA に必要な全 55 基準、または WCAG 2.2 AAA に必要な全 86 基準を公開します。これには自動化では完了できない手動作業も含まれます。

要件

• Node.js 20 以降

• Chrome または Edge を推奨

• Windows、macOS、または Linux

サーバーはまずインストール済みの Chrome/Edge を探します。サポートされている Linux 環境では、バンドルされている @sparticuz/chromium にフォールバックできます。A11Y_MCP_BROWSER_PATH に明示的なブラウザ実行ファイルを設定できます。Chromium のサンドボックスはデフォルトで有効のままです。A11Y_MCP_NO_SANDBOX=true は、制約のあるコンテナや Lambda スタイルのランタイムなど、Chrome を起動できない場合にのみ設定してください。

Windows へのインストール

プロジェクトを置いているフォルダーで PowerShell を開きます。

git clone https://github.com/aditya-ariosity/a11y-feedback-mcp.git
cd a11y-feedback-mcp
npm install
npm run build

リポジトリがまだ GitHub にない場合は、最初にこのフォルダーをダウンロードまたはコピーし、その中で最後の 3 つのコマンドを実行してください。

Codex を接続する

PowerShell から、ビルドされたエントリポイントへの絶対パスを使用します。

codex mcp add a11y-feedback -- node "C:\full\path\to\a11y-feedback-mcp\dist\index.js"

または、同等の設定を ~/.codex/config.toml に追加します。

[mcp_servers.a11y_feedback]
command = "node"
args = ["C:\\full\\path\\to\\a11y-feedback-mcp\\dist\\index.js"]
startup_timeout_sec = 30
tool_timeout_sec = 90

[mcp_servers.a11y_feedback.env]
A11Y_MCP_ALLOWED_ROOT = "C:\\full\\path\\to\\your-projects"

Codex を再起動して、次のように依頼します。

このページを 1440×900 と 390×844 で監査してください。致命的および重大な問題を修正し、両方の監査を再実行して、残っている手動チェックをリストアップしてください。

検証とトラブルシューティングについては、docs/codex.md を参照してください。

Claude Code を接続する

claude mcp add --scope user a11y-feedback -- node "C:\full\path\to\a11y-feedback-mcp\dist\index.js"

接続を確認するには claude mcp list を実行してください。Claude Design ブリッジワークフローについては、docs/claude-code-and-design.md を参照してください。

開発

npm install
npm run check
npm test
npm run test:e2e
npm run build

npm test は、色計算、ネットワーク保護、修正、MCP 契約をカバーします。npm run test:e2e は Chromium を起動し、意図的にアクセス不能にしたフィクスチャを監査します。

ローカルの stdio サーバーを起動します。

npm run dev

オプションの Streamable HTTP トランスポートを起動します。

npm run build
npm run start:http

エンドポイントは http://127.0.0.1:3000/mcp、ヘルスチェックは http://127.0.0.1:3000/health です。HTTP はデフォルトで 127.0.0.1 にバインドされます。

環境変数

参照用 HTTP サーバーをパブリックインターネットに直接公開しないでください。認証、TLS、レート制限、リクエストサイズ制限、テナント分離をその前面に配置してください。docs/security.md を参照してください。

現在の範囲

MVP は、レンダリングされた Web UI と決定論的なコントラスト計算をカバーしています。ネイティブモバイルアプリ、PDF、キャンバス、ビデオキャプション、生の Claude Design ピクセルはまだ検査しません。計画中のアダプターにより、MCP 契約を変更することなく、フレームワーク対応のパッチ、スクリーンショット/OCR 支援、デザイントークン統合、CI 注釈、ファーストクラスのデザインキャンバスコネクターを追加できます。

プロジェクトドキュメント

• アーキテクチャと製品仕様

• Codex セットアップ

• Claude Code と Claude Design のセットアップ

• セキュリティモデル

• W3C WAI カバレッジモデル

• コンパニオンエージェントスキル

• コントリビューション

ライセンス

MIT