axe MCPサーバー

概要

axe MCPサーバーは、エンタープライズグレードのアクセシビリティテストを開発のワークフローに直接統合するモデルコンテキストプロトコル（MCP）サーバーです。信頼性の高いaxeプラットフォーム上に構築されており、開発者がIDEを離れることなく包括的なアクセシビリティスキャンを実行し、専門的な修正ガイダンスを受け取ることができます。

このサーバーは、2つの主要な機能を提供します - analyze と remediate。

これらのツールはMCP互換のクライアント（Claude Desktop、VS Code with Copilot、Cursorなど）とシームレスに統合され、組織のaxe設定を尊重します。

アクセスを取得する

axe MCPサーバーは Axe DevTools for Web バンドルに含まれています。

ツールと機能

analyze ツール

analyze ツールは、実際のブラウザ環境でaxe DevToolsブラウザ拡張機能を使用し、ウェブページの包括的なアクセシビリティ分析を実行します。ローカル開発URL（例えば、 localhost:3000）やリモートのプロダクションURLともシームレスに動作します。

機能説明

1. APIキーの検証 - ユーザーのAPIキーを検証し、認証されたアクセスを保証します
2. 設定の取得 - ユーザーの組織固有の axe設定 を取得し、次の内容を含めます:
   • アクセシビリティテストの標準（例: WCAG 2.2 AA）
   • axe-coreバージョン
   • レビューが必要 / ベストプラクティス
3. ブラウザベースの分析 - axe DevTools拡張機能をマウントして、バックグラウンドでブラウザインスタンスを起動します
4. ページナビゲーション - ユーザーのAIエージェントへのプロンプトで提供されたURLに移動します
5. アクセシビリティスキャン - レンダリングされた ページを対象にaxe DevToolsブラウザ拡張機能を用いて完全なアクセシビリティ分析を実行し、実際のユーザー体験がテストされることを保証します（静的HTMLだけでなく）。
6. 結果の配信 - 包括的な分析結果をエージェントに構造化された形式で返します

レスポンシブテスト

analyze ツールは、オプションの viewportWidth および viewportHeight パラメータをサポートし、特定のビューポートサイズでのページテストを可能にします。これは、モバイルやタブレットのブレークポイントなど、特定の画面サイズでのみ発生するアクセシビリティ問題を発見するのに役立ちます。

Analyze http://localhost:3000 for accessibility issues at a mobile viewport of 375x812

これらのパラメータを省略すると、ブラウザはデフォルトのビューポートサイズを使用します。

主な利点

• 実際のブラウザテスト - ソースコードではなく、実際にレンダリングされたページをテストすることで、正確な結果を保証します
• 組織の基準 - チームのaxe設定を尊重し、すべてのユーザーにわたって一貫したテストを提供します
• 包括的なカバレッジ - 業界をリードするaxeプラットフォームを活用します
• レスポンシブテスト - 特定のビューポート寸法でテストして、ブレークポイント固有のアクセシビリティ問題を見つけます

出力

このツールは以下を含む構造化されたJSONレスポンスを返します：

• 見つかったすべてのアクセシビリティ違反
• 違反の重大度レベル（重大、深刻、中程度、軽微）
• 特定の要素セレクタとソースコード
• ルールIDと説明

その remediate ツール

その remediate ツールは、axeによって特定されたアクセシビリティ問題を取り上げ、コーディングエージェントが実際のコード修正に翻訳できるように、コンテクスト認識のAIを使った修正ガイダンスを生成します。

機能

1. APIキーの検証 - ユーザーのAPIキーを検証して、権限のあるアクセスを保証します
2. AIクレジットの使用 - 各 remediate コールは、Dequeの広範なアクセシビリティ専門知識に基づいてトレーニングされた高度なAIモデルを使用するために、組織の割り当てからAIクレジットを消費します
3. AI生成の修正提案 - コーディングエージェントが解釈しソースコード内で実装できる質の高い、実行可能なアクセシビリティ修正を作成します

出力

このツールは以下を含む構造化された修正ガイダンスを返します：

• 必要な修正の概要
• 必要な具体的なコード変更（HTML形式）
• アクセシビリティの理由とWCAG基準
• 適切な実装を保証するための追加のコンテクスト

クレジット使用状況

その remediate ツールは AIクレジット管理システムの一部です。各修正リクエストは、組織の月次クレジット割り当てから消費します。管理者はaxeアカウントポータルを通じてクレジット使用状況を監視できます。

インストールとセットアップ

前提条件

• Dockerがシステムにインストールされて実行中であること
• axe MCPサーバー用にAIエージェントが設定されていること（ 設定 を参照してIDE固有の設定手順を確認）
• Dequeの営業担当者と話し、axe MCPサーバーアクセスを有効にするサブスクリプション

ステップ1：APIキーの生成

1. その axeアカウントポータル
2. にログイン APIキーのページ
3. に移動して 新しいAPIキーを追加
4. をクリックします axe MCPサーバー 製品として
5. APIキーに対して説明的な名前を入力します
6. クリックして 保存
7. 次のステップで使用するために生成されたAPIキーをコピーします

ステップ2: Dockerイメージを取得する

最初に、それから更新されたバージョンを使用したいときはいつでも、次のことを行う必要があります。 docker pull axe MCP Serverイメージを取得します:

docker pull dequesystems/axe-mcp-server:latest

ステップ3: 設定

特定の設定手順についてIDEを選択します:

• Copilotを使ったVS Codeでの設定
• Cursorでの設定
• Claude Codeでの設定

サンプルプロンプト

期待されるツールが呼び出されることを確認する

多くのIDEで次の構文（「#」プレフィックス）を使用すると、axe MCP Serverツールが期待通りに呼び出されます:

#analyze the http://localhost:3033/ web page for accessibility issues and #remediate any violations found

ローカルホストURLのアクセシビリティ問題を分析する:

Analyze http://localhost:3000 for accessibility issues

修正を伴う分析:

Analyze https://example.com for accessibility issues and fix any issues found

AIエージェントの設定（推奨）

AIコーディングエージェントがaxe MCP Serverツールを正しく使用し、アクセシビリティのベストプラクティスに従うことを保証するには、カスタム指示を提供できます。これらの指示は、エージェントがアクセシビリティ問題を分析し、修正するための適切なワークフローを理解するのに役立ちます。

指示を追加する場所

方法はクライアントによって異なります:

• GitHub Copilotを使ったVS Code - プロジェクトルートに追加 .github/copilot-instructions.md してください
• Cursor - 設定の「Cursor Rules」に追加してください
• Claude Code - プロジェクトルートの CLAUDE.md ファイルに追加してください
• Claude Desktop - 設定のカスタム指示に追加してください
• その他のMCPクライアント - カスタム指示設定については、クライアントのドキュメントを参照してください

サンプルのワークフロー指示

以下にエージェント用に適応可能な推奨テンプレートを示します:

# Accessibility Testing and Remediation Workflow

## MANDATORY WORKFLOW - DO NOT DEVIATE

When working with accessibility issues, you MUST follow this exact workflow:

### 1. Analysis Phase

When asked to analyze pages for accessibility issues, you MUST:

- Use the `analyze` tool to scan the page
- Do NOT manually identify accessibility issues
- Always provide the complete URL being analyzed

### 2. Remediation Phase

When asked to remediate or fix accessibility issues, you MUST:

- First use `remediate` tool for EACH violation found
- Provide the exact HTML element, rule ID, and issue description
- Review the remediation guidance before making any code changes
- Apply fixes based on the remediate tool's recommendations
- Do NOT manually fix accessibility issues without first using the remediate tool

### 3. Verification Phase

After applying fixes, you MUST:

- Re-run `analyze` to verify all issues are resolved
- Confirm zero violations before considering the task complete

## Required Workflow Example:

1. analyze → Find violations
2. For each violation: remediate → Get fix guidance
3. Apply recommended fixes to code
4. analyze → Verify fixes

## Enforcement

- NEVER skip the remediate tool when fixing accessibility issues
- ALWAYS use both analyze and remediate tools as specified
- This workflow ensures proper accessibility best practices and compliance

これが重要な理由

これらの指示はあなたのエージェントに以下を保証します:

• Dequeの専門知識を活用する - 一般的なLLMの知識ではなく、何十年ものアクセシビリティ評価データに基づいて訓練されたAIモデルを活用します
• ベストプラクティスに従う - 一般的な解決策ではなく、WCAGに準拠した一貫性のある修正を適用します
• 変更を検証する - 修正が実際に問題を解決したか常に確認します
• 誤った自信を避ける - 専門的な指導なしにアクセシビリティ問題の修正法を知っていると仮定しません

これらの指示を提供することは任意ですが、あなたのコードベースにおけるアクセシビリティの修正の品質と信頼性を大幅に向上させます。

設定オプション

axe MCP Serverはカスタマイズのためにいくつかの環境変数をサポートしています:

AXE_SERVER_URL

デフォルトの値（https://axe.deque.com）は、Dequeの共有US SaaSインスタンスを使用しているほとんどのユーザーに適しています。 組織が次のいずれかを使用している場合、 AXE_SERVER_URL をインスタンスの基本URLに設定する必要があります:

• リージョナルSaaSインスタンス **** （EU、オーストラリア、フランクフルトなど）
• プライベートクラウド **** デプロイメント
• オンプレミス **** インストール

組織がどのインスタンスを使用しているかわからない場合は、axeアカウントポータルにログインするURLを確認するか、管理者に問い合わせてください。

明示的に AXE_SERVER_URL MCPサーバー構成の env ブロックに設定してください。 VS Code with Copilot および カーソル のIDE向けのセットアップガイドには、具体的な追加場所の例が記載されています。

トラブルシューティング

一般的な問題

サーバーが起動しない:

• Dockerが実行中であることを確認してください
• APIキーが正しいことを確認してください
• axe MCPサーバーへのアクセス権があるか確認してください（必要に応じてサポートに連絡）

スキャンタイムアウト:

• 複雑なページに対して BROWSER_TIMEOUT_MS を増やしてください
• ターゲットURLがネットワークからアクセス可能であることを確認してください
• ネットワーク接続の問題を確認してください

ERR_CONNECTION_REFUSED ローカル開発サーバーを分析する際に

以下の analyze ツールで net::ERR_CONNECTION_REFUSED ローカルで動作している開発サーバーをスキャンしようとする際にエラーが発生した場合、これはおそらくaxe MCPサーバーがDockerコンテナ内で実行されており、サービスが次の場所にのみバインドされているために接続できないことが原因です。 localhost （つまり、 127.0.0.1）ホストマシン上にあります。

エラーの例：

net::ERR_CONNECTION_REFUSED at http://192.168.65.2:5173/

解決策： 開発サーバーを起動し、 --host フラグを設定してください。 0.0.0.0 これにより、すべてのネットワークインターフェイスでリスニングするようになり、Dockerコンテナ内から接続可能になります：

# Vite
npm run dev -- --host=0.0.0.0

# Webpack (webpack-dev-server)
npm run dev -- --host=0.0.0.0

認証エラー：

• APIキーが有効で期限切れになっていないことを確認してください
• axeアカウントポータルのサブスクリプションにMCPサーバーアクセスが含まれていることを確認してください
• APIキーが「axe MCPサーバー」製品用に作成されたものであることを確認してください
• 組織が地域のプライベートクラウドやオンプレミスのaxeインスタンスを使用している場合は、 AXE_SERVER_URL がインスタンスのベースURLに設定されていることを確認してください — そうでないと、サーバーは認証を試み、 https://axe.deque.com 失敗します。「 設定オプション 」の詳細を参照してください。

Docker関連の問題：

• Dockerデーモンが実行中であることを確認してください
• Dockerの権限を確認してください
• Dockerイメージのダウンロードのためのネットワーク接続を確認してください
• 「docker system prune」を実行して、Dockerに十分なメモリがあることを確認してください docker system prune

ヘルプを受ける

このトラブルシューティングセクションに含まれていない問題が発生した場合：

1. VS Codeデベロッパーコンソールで詳細なエラーメッセージを確認してください
2. Dockerコンテナのログを確認し、追加のデバッグ情報を入手してください
3. 次のアドレスでサポートチームに連絡してください： helpdesk@deque.com 以下の情報を提供してください：
   • お使いのVS Codeバージョン
   • Dockerバージョン
   • 完全なエラーメッセージ
   • 問題を再現する手順

サポート

axe MCPサーバーに関する質問、問題、フィードバックについて：

• 技術サポート： helpdesk@deque.com
• 一般的なお問い合わせ： helpdesk@deque.com
• 販売に関する質問： sales@deque.com

セキュリティとプライバシーに関するFAQ

axe MCPサーバーが我々のソースコードをキャプチャまたは保存しますか？

いいえ。 axe MCPサーバーはデータベースや永続的なストレージにソースコードをキャプチャしたり保存したりしません。

次の場合： analyze ツールが実行されると、その応答にはアクセシビリティ問題の要素のHTMLソースコードが含まれ、コンテキストおよびデバッグの目的で使用されます。ただし、このデータは以下のとおりです：

• あなたのAIエージェントへの即時のAPI応答にのみ返され
• Deque管理のデータベースに保存されることはありません
• ローカルの開発環境内にとどまります
• 分析が完了すると破棄されます

MCPテスト結果はDeque管理のインフラストラクチャ上でどれくらいの期間保存されますか？

保存されません。 MCPテスト結果は、Deque管理のデータベースやストレージシステムには一切保存されません。

ツールは、 analyze 以下の通りです：

• あなたのマシン上のDockerコンテナ内で完全に実行され
• 結果を直接あなたのAIエージェントに返します
• 分析結果をDequeサーバーに送信しません

唯一の例外は、 remediate ツールを呼び出したときであり、最小限の違反メタデータ（以下参照）が含まれることがあり、AIを活用した修正ガイダンスを生成します。

どのデータがDequeサーバーに送信されますか？

使用時のみ、 remediate ツール：

以下のデータが、修正ガイダンスを生成するためにDequeのAI修復エンドポイントに送信されます：

• ルールID - 違反した特定のアクセシビリティルール
• 要素のHTML - 影響を受けた要素のHTMLマークアップ
• 問題のメタデータ - axe-coreからの違反の説明と修復ガイダンス

このデータは、修復ガイダンスを生成するためにのみ使用され、Dequeデータベースに長期間保存されることはありません。

ツールは、 analyze データをDequeサーバーに送信しません APIキーの検証リクエストを除いて。

AIエージェントが機能するためにはどの程度のアクセスが必要ですか？

AIエージェント（Claude、Copilot、Cursor など）に必要なアクセス権：

1. MCPサーバー通信 - エージェントは、モデルコンテキストプロトコルを通じてMCPサーバーのツールを呼び出すことができなければならない

2. ツール応答データ - エージェントが受け取る情報：

   • からのアクセシビリティ違反データ analyze 呼び出し
   • からの修復ガイダンス remediate 呼び出し
   • このデータは、エージェントが問題を理解し、コード修正を生成するために必要です

3. あなたのコードベース（オプション） - エージェントが自動的にコード修正を適用することを希望する場合は、ソースコードファイルへのアクセスが必要です

• これはIDE（VS Code、Cursor など）でのAIコーディングアシスタントの標準です
• ツールを分析とガイダンスのためだけに使用する場合は必要ありません（例：Claudeデスクトップアプリ経由）

MCPサーバー自体が必要とするアクセスは：

• あなたが指定したテスト用のURL（ローカルとリモートの両方をサポート）
• あなたのaxe APIキー（axeアカウントポータルで生成され、環境変数を通じて提供されます）

重要： MCPサーバーはあなたのマシン上のDockerコンテナ内でローカルに実行されます。ファイルシステム全体への広範なアクセスを必要とせず、Dockerが要求する以上の高い権限を必要としません。

ベストプラクティス

• APIキーのセキュリティ - AXE_API_KEY をコード内ではなく環境変数として保存する
• ローカルテスト - センシティブなプレプロダクションコードを隔離するために、ローカル開発URL（localhost）またはステージングをテストする
• ネットワークの隔離 - MCPサーバーは以下のみと通信します:
  • 分析を明示的に要求されたURL
  • APIキーの検証と修正のためのDequeサーバー（呼び出された場合）
  • MCPプロトコルを介したローカルAIエージェント
• 適用前の確認 - AIが生成したコードの変更をコードベースにコミットする前に必ず確認する