axe MCPサーバー

概要

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

サーバーは3つの機能を提供します - analyze、remediate、igt。

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

アクセスを取得する

Axe MCP ServerはAxe DevTools for Webバンドルに含まれています。Axe MCP Serverへのアクセスを許可するためのサブスクリプションは、Dequeの営業担当者と相談して設定します。

ツールと機能

analyzeツール

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

機能

1. 認証 - ユーザーの認証情報（APIキーまたはOAuth 2.0アクセス トークン）を検証して、認可されたアクセスを保証します
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

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

部分ページスキャン

デフォルトでは、analyze ツールはページ全体をスキャンします。特定の領域のスキャンに限定するには、オプションのselectorパラメーターを渡します。これは、単一のコンポーネントに集中する場合やページのノイズの多い無関係な部分を結果から除外する場合に有用です。

• 単一のCSSセレクタ文字列 はトップフレーム内の要素をターゲットにします。

  {
    "url": "http://localhost:3000",
    "selector": "#main"
  }

• CSSセレクタの配列 は iframe や shadow-DOM の境界を通過します — 各セグメントが次のホストを選択します。ターゲットがiframeやシャドウルート内に存在するときのみ配列を使用します：

  {
    "url": "http://localhost:3000",
    "selector": ["iframe#checkout", "#payment-form"]
  }

配列は最大10個のセグメントをサポートします。ページ上でセレクタが要素に一致しない場合、スキャンはエラーを返します。selectorが省略されると、全ページがスキャンされます。

AIエージェントに自然言語でプロンプトを出します―エージェントは意図をツールコールに翻訳します。

Scan only the #main region of http://localhost:3000 for accessibility issues

スキャン前のブラウザーインタラクション

analyze ツールは、オプションのbefore手順の配列をサポートしており、ページの読み込み後が実行されますがアクセシビリティスキャンの前されません。これにより、いくつかの実際のテストシナリオが可能になります：

• ログインが必要なページ — 認証情報を入力して送信し、ログイン後のページをスキャンする前に
• Cookie/同意バナー — バナーを解除して、ページコンテンツの上に重なったり覆ったりしないようにします
• 動的コンテンツ — クライアントレンダリングされたコンテンツ（ルート変更、後から挿入されたDOM）が表示されるのを待ってからスキャンを行います

Steps execute in array order, in the スキャンと同じブラウザーコンテキスト as the scan, so cookies, localStorage, and any route changes triggered by click or fill persist into the scan.

before 配列は最大20ステップをサポートします。各ステップにはBROWSER_TIMEOUT_MS（デフォルトは30000ms）のタイムアウトが設定されており、ステップごとの上書きはありません。

サポートされているアクション

スキャン前のログイン例

AIエージェントに自然言語でプロンプトを出します―エージェントは意図をツールコールに翻訳します。

Analyze http://localhost:3000 for accessibility issues. Before running
the analysis, fill in the #username and #password fields with USERNAME
and PASSWORD from ./.env.local, click the button[type=submit] button,
and wait for #main-content to appear.

エージェントがプロンプトを解決し、次のようなペイロードでanalyzeツールを呼び出します。

{
  "url": "http://localhost:3000",
  "before": [
    {
      "action": "fill",
      "selector": "#username",
      "value": "<resolved-from-.env.local>"
    },
    {
      "action": "fill",
      "selector": "#password",
      "value": "<resolved-from-.env.local>"
    },
    { "action": "click", "selector": "button[type=submit]" },
    { "action": "waitFor", "selector": "#main-content" }
  ]
}

Cookie注入

analyze ツールは、ブラウザコンテキストにクッキーを設定するオプションのcookies配列をサポートし、ナビゲーションの前ページへの最初のリクエストに紐付けます。これはbefore アクションとは異なり、後ナビゲーション後に実行されるため、最初のリクエストのルートに影響を与えることはできません。一般的な使用例：

• 環境ルーティング — ステージングまたはフィーチャーブランチセレクタクッキーを設定し、エッジまたはCDNレイヤーが読み取って、提供するサイトのバージョンを決定します。
• 事前認証されたセッション — 有効なセッションクッキーを挿入して、ログインフォームをbeforeで処理せずにスキャンをすでにログインした状態で開始します。

cookies配列は最大で20個のクッキーをサポートします。

クッキーフィールド

例：事前認証されたページにアクセス

AIエージェントに自然言語でプロンプトを出します―エージェントは意図をツールコールに翻訳します。

Analyze https://app.example.com for accessibility issues. Set the session
cookie for app.example.com from ./.env.local so the scan starts already
logged in.

エージェントはクッキー値を解決し、analyzeツールを次のようなペイロードで呼び出します。

{
  "url": "https://app.example.com",
  "cookies": [
    {
      "name": "session",
      "value": "<resolved-from-.env.local>",
      "domain": "app.example.com"
    }
  ]
}

主な利点

• 実際のブラウザテスト - ソースコードだけでなく、実際にレンダリングされたページをテストし、正確な結果を保証します
• 組織の基準 - すべてのユーザーで一貫したテストを行うために、お使いのチームのaxe設定を尊重します
• 包括的なカバレッジ - 業界をリードするaxeプラットフォームを活用します
• レスポンシブテスト - 特定のビューポートサイズでテストを行い、ブレークポイント特有のアクセシビリティの問題を捉えます
• ターゲットスキャン - スキャンを特定の領域、iframe、またはシャドウルートにselectorパラメータで限定します
• 認証済み・インタラクティブページ - ログインの背後にあるページをスキャンし、クッキーバナーを解消したり、beforeアクションを使用して動的コンテンツを待機します
• セッション＆環境クッキー - 認証済みでアクセスしたり、特定の環境にルートしたりするために、cookiesパラメータでナビゲーション前にクッキーを挿入します

出力

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

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

remediateツール

remediateツールは、analyzeまたはigtツールによって特定された1つまたは複数のアクセシビリティ問題を取り込み、文脈に基づいたAI対策ガイダンスを生成します。これにより、コーディングエージェントが実際のコード修正に変換できるようになります。問題は一括で提出されるため、一度の呼び出しでページ上のすべての違反に対する修正を返すことができます。

機能

1. 認証 - ユーザーの資格情報を検証します—APIキーまたはOAuth 2.0アクセストークンのいずれかで認証されたアクセスを確保します
2. AIクレジット使用法 - バッチ内の各問題は、Dequeの豊富なアクセシビリティ専門知識でトレーニングされた高度なAIモデルを使用するためのAIクレジットを、あなたの組織の割り当てから消費します
3. AI生成の修正提案 - コーディングエージェントが解釈してソースコードに実装できるような高品質で実用的なアクセシビリティ修正を作成します

バッチ修正

ツールはissues配列を受け入れます。単一analyzeまたはigtの実行から問題すべてのを1回の呼び出しで一緒に送信し、問題ごとにツールを1回呼び出すのではなく、一括で1から25のまでの問題に対応します。

各問題には以下のフィールドがあります:

自然言語でAIエージェントに指示を出します — バッチを解析結果から組み立てます:

Analyze http://localhost:3000 and remediate every issue found

エージェントはプロンプトを解決し、次のようなペイロードでremediateツールを呼び出します。

{
  "issues": [
    {
      "id": "color-contrast-0",
      "rule": "color-contrast",
      "elementHtml": "<span style=\"color: #aaa\">Sign up</span>",
      "remediation": "Increase the contrast ratio to at least 4.5:1",
      "pageUrl": "http://localhost:3000"
    },
    {
      "id": "image-alt-1",
      "rule": "image-alt",
      "elementHtml": "<img src=\"logo.png\">",
      "remediation": "Add alt text describing the image"
    }
  ]
}

出力

ツールは、各問題に対する結果の配列を返し、idによってその入力に戻されます。結果は2つの形状のいずれかです。

• 成功 — status: "ok"で、remediationオブジェクトには一般的な説明、補正ステップ、および具体的なコード修正が含まれます
• エラー — status: "error"で、補正できなかった問題に対してerrorオブジェクト（codeおよびmessage）があります

{
  "data": [
    {
      "id": "color-contrast-0",
      "status": "ok",
      "remediation": {
        "general_description": "...",
        "remediation": "...",
        "code_fix": "<span style=\"color: #595959\">Sign up</span>"
      }
    },
    {
      "id": "image-alt-1",
      "status": "error",
      "error": { "code": "LLM_ERROR", "message": "..." }
    }
  ]
}

結果は独立しています：ある問題での失敗が他の問題のガイダンスを妨げることはありません。

クレジット使用状況

remediateツールはAIクレジット管理システムの一部です。バッチ内の各問題が組織の毎月の割り当てからクレジットを消費します。管理者はaxeアカウントポータルを通じてクレジット使用量を監視できます。

igtツール

igtツールはDequeの自動インテリジェントガイドテスト（IGT）をあなたのIDEからのウェブページに対して実行します。通常、axe DevToolsブラウザ拡張機能はデベロッパーが手動プロンプトを通じてIGTを進めますが、igtツールはテストを自動的に実行し、コーディングエージェントが行動できる構造化された結果を返します。

今日、ツールはキーボードIGTをサポートしており、ページ上のインタラクティブ要素がキーボードのみでアクセスおよび操作可能かどうかを評価します。

機能

1. 認証 - ユーザーの資格情報を検証します—APIキーまたはOAuth 2.0アクセストークンのいずれかで認証されたアクセスを確保します
2. ブラウザベースのラン - 同じChromiumインスタンスでテストを実行します。そこにはanalyzeツールが使用するaxe DevTools拡張機能がマウントされています。
3. ページナビゲーション - AIエージェントへのプロンプトでユーザーが提供したURLにナビゲートします
4. 自動キーボードIGT - ページをタブ移動し、AIが各タブストップを分析し、フォーカス順序とキーボード操作性を評価します。手動入力は必要ありません。
5. 結果の配信 - 構造化された調査結果をエージェントに返します

利用

このツールは、実行すべきIGTを指定するurlとigtToolsの配列を受け入れます。現在サポートされている値はキーボードIGTのみです。

{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"]
}

AIエージェントを自然言語で促し、エージェントがあなたの意図をツール呼び出しに翻訳します：

Run the keyboard IGT on http://localhost:3000

テスト前のブラウザ操作

analyzeツールと同様に、igtはページの読み込み後を実行しますが、ガイド付きテストが開始される前にことによって実行されるインタラクションステップのbefore配列をオプションで受け入れます。これにより、ログインが必要なページに対してガイド付きテストを実行したり、クッキーバナーを消したり、動的なコンテンツが出現するのを待つことができます。

ステップはテストと同スキャンと同じブラウザーコンテキストで実行されるため（クッキー、localStorage、ルートの変更は持続します）、同じclick、fill、waitForアクションを使用し、20ステップの制限内で行われます。fill.valueの機密値処理およびセレクター規則を含む完全なリファレンスについては、analyzeツールのサポートされているアクションを参照してください。

{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"],
  "before": [
    { "action": "fill", "selector": "#username", "value": "<resolved-from-.env.local>" },
    { "action": "click", "selector": "button[type=submit]" },
    { "action": "waitFor", "selector": "#main-content" }
  ]
}

出力

ツールは、構造化されたJSONレスポンスを返します：

{
  "pageUrl": "http://localhost:3000",
  "data": {
    "keyboard": {
      "issues": [],
      "unanalyzedElements": [],
      "terminatedReason": "keyboard-trap"
    }
  }
}

• issues - 実行中に発見されたキーボードアクセシビリティの違反
• unanalyzedElements - AIが分析できなかったタブストップ。これらはissuesとは別に報告され、手動でレビューできるようにします。それによって合格または不合格として誤報されることを防ぎます。
• terminatedReason - 実行が全てのタブストップを分析する前に中断されたときのみが提示されます。現在の値は"keyboard-trap"で、テストが抜け出せないキーボードトラップに遭遇したことを意味します。残りのステップは中断され、その時点までに分析されたタブストップがissuesで返されます。

クレジット使用状況

igtツールはAIを活用した機能で、AIクレジット管理システムの一部です。各実行は貴社組織の月次割当からAIクレジットを消費します。管理者はaxeアカウントポータルを通じてクレジットの使用状況を監視できます。

始めに

axe MCPサーバーのセットアップには、3つの独立した選択があります:

1. ディストリビューションを選択 — Dockerまたはnpm
2. 認証を設定 — APIキーまたはOAuth 2.0
3. クライアントを構成 — VS Code with Copilot、カーソル、またはClaude Code

環境変数と推奨されるAIエージェントの指示については構成リファレンスを参照してください。不具合が発生した場合はトラブルシューティングを参照してください。

サンプルプロンプト

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

多くの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

ログインの背後にあるページを分析する：

Analyze http://localhost:3000 for accessibility issues. Before running the
analysis, fill in the #username and #password fields with USERNAME and
PASSWORD from ./.env.local, click the button[type=submit] button, and
wait for #main-content to appear.

スキャンの前にクッキーバナーを解除する：

Analyze https://example.com for accessibility issues, but first click the
#cookie-dismiss button to dismiss the cookie consent banner.

セッションクッキーを注入してページをスキャンします：

Analyze https://app.example.com for accessibility issues. Set the session
cookie for app.example.com from ./.env.local so the scan starts already
logged in.

サポート

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コンテナ内、またはnpmディストリビューションを使用したローカルNode.jsプロセスとして
• 結果を直接あなたのAIエージェントに返します
• 分析結果をDequeサーバーに送信しません

唯一の例外はremediateツールを呼び出すときで、AIによる修正ガイダンスを生成するために最小限の違反メタデータを含む場合があります（下記参照）。

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

remediateツールを使用する場合のみ：

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

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

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

analyzeツールはDequeサーバーにデータを送信しません認証要求を超えて（APIキーまたはOAuth 2.0アクセストークンの認証）

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

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

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

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

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

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

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

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

• あなたが指定したテスト用のURL（ローカルとリモートの両方をサポート）
• あなたのaxeクレデンシャル：axeアカウントポータルで生成したAPIキーか、@deque/axe-authを通じて取得したOAuth 2.0アクセストークン。環境変数を通じて提供されます。

重要： MCPサーバーはあなたのマシン上でローカルに動作し、Dockerコンテナまたはnpm配布でNode.jsプロセスとして実行します。ファイルシステム全体のアクセスや高度な特権は必要ありません。

ベストプラクティス

• 資格情報のセキュリティ - あなたのAXE_API_KEYまたはAXE_ACCESS_TOKENを環境変数として保存し、コードに保存しない。OAuth 2.0を使用する場合、@deque/axe-authはトークンをOSキーチェーンに保存し、起動時に新たなアクセストークンを注入します。そのため、配置に長期間の秘密を持たせる必要はありません。
• ローカルテスト - 開発中のローカルのURL（localhost）やステージングをテストして、機密性のあるプレプロダクションのコードを隔離します
• ネットワークの隔離 - MCPサーバーは次にのみ通信します：
  • 分析を明示的に要求されたURL
  • 認証（APIキーまたはOAuth 2.0トークンの確認）と是正措置（呼び出された場合）のためのDequeサーバー
  • MCPプロトコルを介したローカルAIエージェント
• 適用前の確認 - AI生成のコード変更をコミットする前に必ずレビューしてください