分析ツール

この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

パラメータの両方が省略された場合、スキャンは1000×1080で実行されます。viewportWidthのみを渡すと高さが1080にデフォルト化されます。viewportHeightはviewportWidthの設定が必要です。いずれの次元も最大7680ピクセルまで使用できます。

部分ページスキャン

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

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

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

• CSSセレクタの配列はiframeやシャドウ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のオプション配列をサポートし、ページが読み込まれた後からアクセシビリティスキャンの前の間に実行される操作ステップを行います。これにより、複数の実際のテストシナリオが可能になります：

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

ステップは同一ブラウザコンテキストと同じブラウザコンテキストで配列順に実行されるため、localStorage、およびclickやfillでトリガーされたルート変更がスキャンに持ち越されます。

このbefore配列は20ステップまでサポートされています。各ステップはBROWSER_TIMEOUT_MS（デフォルトでは30000ミリ秒）のタイムアウトをそれぞれ持ち、ステップごとのオーバーライドはありません。

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

例: スキャン前のログイン

自然言語で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" }
  ]
}

クッキーインジェクション

analyze ツールはオプションの cookies 配列をサポートしており、ブラウザコンテキストにクッキーを設定しナビゲーション前ページへの最初のリクエストに乗せることができます。これは、ナビゲーション before のアクション 後に実行される 後 とは異なり、初期リクエストのルーティングに影響を与えることができません。一般的な用途は次の2つです:

• 環境ルーティング — エッジまたは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"
    }
  ]
}

スクリーンショット

analyzeツールはページのスクリーンショットを検出報告と共に返すことができ、スキャンされた内容を確認できます。オプションのscreenshotパラメータを渡してオプトインします — 空のオブジェクトで十分です。

{
  "url": "http://localhost:3000",
  "screenshot": {}
}

PNGがデフォルトです。写真が多いページで小さい画像にしたいときはformatを"jpeg"に設定します。

{
  "url": "http://localhost:3000",
  "screenshot": { "format": "jpeg" }
}

画像は、違反報告の後で標準のMCP画像コンテンツブロックとして戻ってきます。

スクリーンショットに表示される内容

• 表示されるビューポートで、ページ全体ではありません。 折りたたまれた部分のコンテンツは含まれません。ページのより多くの部分をキャプチャするには、viewportHeight（例: 4096）を高く設定し、表示領域をカバーしたい部分まで広げます。
• スキャンが始まる直前のページです。 キャプチャはaxe.run()の直前に行われるため、スキャン中に発生するDOMの変更、SPAの再レンダリング、useEffectの更新、アニメーション、進行中のリクエストは反映されません。シングルページアプリではこのズレが一般的です。

コストとクライアントサポート

画像がインラインでレンダリングされるかどうかはMCPクライアント次第です。サーバーは常に仕様に準拠した画像ブロックを返しますが、一部のクライアントはツール結果を折りたたんだり画像のプレビューを省略したりします — Copilotを搭載したVS Codeは表示しますが、CursorやClaude Desktopは表示しないかもしれません。プレビューが欠けているのは、クライアント側の表示制限であり、キャプチャの失敗ではありません。

スクリーンショットをディスクに保存する

スクリーンショットはファイルに書き込むこともでき、インライン画像をレンダリングできないクライアントでキャプチャを見る信頼性のある方法です。saveToを絶対パスに設定します。

{
  "url": "http://localhost:3000",
  "screenshot": { "saveTo": "/Users/me/Desktop/home.png" }
}

または、save: trueを設定してサーバーにファイル名を選ばせます。

{
  "url": "http://localhost:3000",
  "screenshot": { "save": true }
}

書き込まれた絶対パスはレスポンスのmessages配列で返されるので、エージェントはファイルの場所を伝えることができます。

保存は成功したスキャンのみに適用されます。スキャンがスクリーンショットを取得した後に失敗した場合、inlineにかかわらず、エラーとともに画像がインラインで返され、ディスクに書き込まれることはありません。

キャプチャが失敗した場合

スクリーンショットキャプチャはベストエフォートであり、スキャンを失敗させることはありません。キャプチャがタイムアウトした場合でも、スキャンは結果を返し、応答のmessages配列に注釈が付きます：

Screenshot capture failed: <reason>

スクリーンショットを撮った後にスキャン自体が失敗した場合でも、画像はエラー応答とともに返されます — 問題が発生した瞬間のページの視覚的な状態は、通常、最も有用なデバッグの証拠です。

高度なルール

標準のaxe-coreルールセットを超えて、analyzeツールは高度なルールを実行できます — スクリーンショット、コンピュータビジョン、大規模言語モデルを使用した自動テストで、axe-coreだけでは捉えきれない問題を見つけます。例えば、見た目は見出しのようだが本当はそうではない見出しや、役に立たない代替テキストの付いた情報画像などです。

どのプリセットが実行されるかは、組織のAxe設定により決まりますが、管理者が許可する場合には、サーバー単位でAXE_ADVANCED_RULESやスキャン単位でadvancedRules引数を使用して上書きすることができます：

{
  "url": "http://localhost:3000",
  "advancedRules": "thorough"
}

すべての応答には実際に実行されたプリセットとその出所が報告されます：

{
  "advancedRules": {
    "value": "thorough",
    "source": "tool_arg"
  }
}

高度なルールは、Web用Axe DevToolsサブスクリプションとともに提供されます — Axe MCPサーバーを提供するのと同じものです。スキャンに約15〜20秒を追加し、AIクレジットを消費し、analyzeがページデータ（全ページのスクリーンショットとページ構造）をDequeに送信する唯一のケースです。プリセット、優先順位、劣化メッセージ、プライバシーの詳細については高度なルールを参照してください。

主な利点

• 実際のブラウザテスト - 実際にレンダリングされたページをテストし、正確な結果を確保します
• 組織基準 - 一貫したテストを行うために、チームのAxe設定を尊重します
• 包括的なカバレッジ - 業界をリードするAxeプラットフォームを活用します
• レスポンシブテスト - 特定のビューポート寸法でテストを行い、ブレークポイント固有のアクセシビリティの問題を捉えます
• ターゲットスキャン - selectorパラメータを使用して特定の領域、iframe、またはシャドウルートにスキャンの範囲を絞ります
• 認証済み＆インタラクティブなページ - ログイン後のページをスキャンし、クッキーバナーを閉じたり、beforeアクションを使用して動的コンテンツを待機したりします
• セッション＆環境クッキー - Land already authenticated, or route to a specific environment, by injecting cookies before navigation with the cookies parameter
• 視覚的コンテキスト - スキャンが失敗した場合を含め、screenshotパラメータを使用してレポートと一緒にページのスクリーンショットを返します
• 高度なルール - ビジュアルまたはコンテキスト的な推論を必要とする問題を捉え、組織が制御する信頼水準で検出します
• インテリジェントガイド付きテスト - igtToolsパラメータを使用して、同じ通話で同じページに対してキーボード、インタラクティブ要素、およびモーダルダイアログのIGTを実行します

出力

ツールは以下を含む構造化されたJSON応答を返します：

• 見つかったすべてのアクセシビリティ違反
• 違反の深刻度レベル（重大、深刻、中程度、軽度）
• 特定の要素セレクタとソースコード
• ルールIDと説明
• 実行された高度なルールプリセットとそれがどこから来たかを報告するadvancedRulesブロック
• 実行に関するメモ（例えば、スクリーンショットキャプチャの失敗、劣化した高度なルール実行、または保存されたスクリーンショットのパス）を持つmessages配列

screenshotが設定されている場合、レポートに続いてイメージコンテンツブロックが続きます。igtToolsが設定されている場合、IGTの結果がAxeの結果と共にIGT名でキー付けされて返されます。