インテリジェントガイド付きテスト

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

analyzeツールは、Axeスキャンの直後に、Dequeの自動化インテリジェントガイド付きテスト (IGT)を同じ呼び出しでページに対して実行できます。オプションのigtTools配列に実行するIGTを列挙して渡します。

値 IGT チェック内容
"keyboard" キーボード タブ順序、キーボードで到達できない要素、フォーカストラップ、欠けているまたは弱いフォーカスインジケータ、およびフォーカスでフォームを送信する要素
"interactive-elements" インタラクティブ要素 ボタン、リンク、カスタムコントロールが適切なアクセシブルネーム、ロール、および状態を持っているかどうか。インタラクティブ要素IGTを参照してください。
"modal" モーダルダイアログ フォーカスがモーダル内に留まるか、モーダルのダイアログセマンティクス、および（トリガーが与えられた場合）閉じられるかどうか、そして閉じた後にフォーカスがどこに移動するか。モーダルダイアログIGTを参照してください。 
{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"]
}

自然言語でAIエージェントに指示を出してください - エージェントはあなたの意図をツールコールに変換します:

Scan http://localhost:3000 for accessibility issues and run the keyboard IGT on it

リクエストされた全てのIGTは、Axeスキャンの後に連続しての順に同じページで、同じブラウザで、同じビューポート幅で実行されます。ページの準備に関することは1回だけ実行され、スキャンおよびすべてのIGTに適用されます: beforeアクション、クッキー注入、およびビューポートパラメータ。

{
  "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" }
  ]
}

レスポンスの形状

igtToolsを設定すると、dataの形状が変わります。それがない場合、dataはAxe問題の配列です。設定している場合、dataには同じレベルに2つのキー、axeとigtがあり、リクエストされた各IGTに1つのigtエントリがあります:

{
  "pageUrl": "http://localhost:3000",
  "data": {
    "axe": [],
    "igt": {
      "keyboard": {
        "status": "complete",
        "issues": [],
        "igtElements": [],
        "terminatedReason": "keyboard-trap"
      },
      "modal": {
        "status": "complete",
        "issues": [],
        "igtElements": []
      }
    }
  }
}
  • status — "complete"または"error"。他のすべてを読む前に確認してください: issuesとigtElementsは"complete"のみに存在し、errorは"error"のみに存在します。段階的選択は、インタラクティブ要素IGTに対してさらに3つのステータスを追加します。
  • issues — IGTが見つけたアクセシビリティの問題。この配列の長さが問題数です。
  • igtElements — IGTが処理したすべて要素（問題の有無にかかわらず）。analysisFailed: trueを持つエントリはAIによる分析ができず、手動でレビューする必要があります。各エントリは識別可能なフィールドのみでトリミングされます: vnodeId、selector、tagName、role、accessibleName、states、およびanalysisFailedは、それぞれの要素が含む場合にのみ存在します。
  • terminatedReason — すべてのステップが完了する前に実行が終了した場合にのみが存在しますので、結果は部分的な可能性があります。エラーではありません。終了理由を参照してください。
note

igtToolsなしの呼び出しは変更されません。 dataは以前と変わらずにAxe問題の配列のままであるため、既存のプロンプトやエージェントの指示、統合は修正なしで機能し続けます。

終了理由

terminatedReason IGT 意味
insufficient-credits 任意 実行中にAIクレジットがアカウントで不足しました。
subscription-missing 任意 アカウントはIGTに必要なAxe DevTools for Webサブスクリプションを持っていません。
keyboard-trap キーボード テストは抜け出せないフォーカストラップに遭遇しました。
dismissibility-unavailable モーダル トリガーがなかった（modalSelectorのみまたはbeforeのみの実行）、そのためモーダルが閉じられるかどうかを確認できませんでした。期待されるはそれらのモードでモーダルが正常に評価される場合、失敗ではありません。
focus-restoration-unavailable モーダル フォーカスがモーダルを閉じた後にどこに移動するかを確認するためのトリガーがありませんでした。期待されるはトリガーなしモードの場合で、失敗ではありません。
modal-not-detected モーダル 評価するモーダルが見つかりませんでした。
modal-dismiss-failed モーダル 評価中にモーダルを閉じることができませんでした。
trigger-not-resolved モーダル modalTriggerSelectorはページ上のどの要素にも一致しなかったため、モーダルは開かれませんでした。
modal-selector-not-resolved モーダル modalSelectorはページ上のどの要素にも一致しませんでした。
modal-selector-not-visible モーダル modalSelectorは、表示されない要素に一致しました。モーダルがインタラクションで開く場合は、beforeを使用して開いてください。
modal-fallback-not-resolved モーダル フォールバックとして渡されたmodalSelectorがページ上のどの要素にも一致しませんでした。
modal-fallback-not-visible モーダル フォールバックとして渡されたmodalSelectorが、表示されない要素に一致しました。

インタラクティブ要素IGTには独自の終了理由がありません。インタラクティブ要素のないページは"complete"の結果を空の配列とともに返します。

障害の隔離

障害が発生したIGTは、ではないコールを失敗させず、Axeの結果や他のIGTには影響しません。この障害は、そのIGT自身のstatus: "error"としてメッセージで報告されます。Axeの結果および他のすべてのIGTの結果は通常通り返されます。これには、組織の機械学習設定が無効になっている場合も含まれ、この場合、各IGTのエントリには機械学習が必要であると説明されます。

クレジットの使用

IGTはAIを利用しており、AIクレジット管理システムの一部です。各実行は、組織の月単位の割り当てからAIクレジットを消費しますが、Axeスキャン自体は消費しません。各スキャンにIGTを追加するのではなく、意図的にIGTをリクエストしてください。インタラクティブ要素IGTでは、スコーピングまたは要素選択を使用すると、分析される要素の数が減少し、消費されるクレジットも減少します。

tip

もしカスタムエージェント指示がエージェントにスタンドアロンigtツールを呼び出すよう指示している場合、それをanalyzeとigtToolsを使用するよう更新してください。一つのコールでスキャンとIGTの両方をカバーでき、スタンドアロンツールは非推奨です。

インタラクティブ要素IGT

インタラクティブ要素IGTは、ページ上のボタン、リンク、およびカスタムコントロールを見つけ、AIを使用して各要素のアクセシブルな名前、役割、状態をチェックします。デフォルトでは単一のコールですべてインタラクティブ要素を分析します：

{
  "url": "http://localhost:3000",
  "igtTools": ["interactive-elements"]
}
Analyze http://localhost:3000 and run the interactive elements guided test

分析される各要素はAIクレジットを消費するため、大規模なページ（データグリッド、長いナビゲーションメニュー、商品リストなど）ではデフォルト実行が多くのクレジットを消費することがあります。分析対象を制限する2つのオプションがあります。

includeSelectorsでのスコーピング

includeSelectors、CSSセレクタの配列を渡し、それに一致する要素のみを分析します。セレクタ外の要素は分析されません：

{
  "url": "http://localhost:3000",
  "igtTools": ["interactive-elements"],
  "includeSelectors": ["#main", "nav.primary"]
}
Analyze http://localhost:3000 and run the interactive elements guided test,
but only on the elements inside #main and nav.primary

includeSelectorsはanalyzeのselectorとは異なります。selectorはAxeスキャンがカバーするページの部分を制限し、includeSelectorsはインタラクティブ要素IGTが分析する要素を制限します。どちらか一方または両方を使用できます。includeSelectorsはigtToolsで"interactive-elements"を必要とします。

テストする要素の選択

どの要素が重要か事前にわからない場合は、段階的選択を使用してください。テストを二つのツールコールに分け、その間に一時停止し、何が分析されるかを選択できます：

  1. 最初のコール — 要素を見つける エージェントはanalyzeをinteractive: trueとともに呼び出します。Axeスキャンは通常通り実行され、IGTはページのインタラクティブ要素を見つけますが、それらにAI分析なしは実行されません。実行が一時停止され、発見された要素のリストとsessionIDが返されます。
  2. あなたが選ぶ エージェントはリストを表示します — それぞれの要素の役割、アクセシブルな名前、状態が可能な限りコンポーネントや役割ごとにグループ化されています — そして、あなたはテストする要素を指定します。
  3. 次のコール — 分析 エージェントは再度analyzeを呼び出し、選択したsessionIDとselectedIDsを使用します。一時停止された実行は同じブラウザセッションで続行され、ページの再読み込みや要素の再発見なしに、選択した要素のみの通常の"complete"結果を返します。

そのことを求めるプロンプト：

Analyze http://localhost:3000 and run the interactive elements guided test.
Show me the interactive elements it finds first and let me choose which
ones to test.

最初のコール：

{
  "url": "http://localhost:3000",
  "igtTools": ["interactive-elements"],
  "interactive": true
}

Axeの結果と候補を返す：

{
  "pageUrl": "http://localhost:3000",
  "data": {
    "axe": [],
    "igt": {
      "interactive-elements": {
        "status": "needs_selection",
        "sessionID": "3f9c…",
        "candidates": [
          { "vnodeId": 12, "role": "button", "name": "Add to cart" },
          { "vnodeId": 31, "role": "link", "name": "Checkout" }
        ],
        "componentGroups": { "intelligent": [], "role": [] }
      }
    }
  }
}

第二のコールはvnodeIdで選ばれた候補の名前を付ける：

{
  "url": "http://localhost:3000",
  "igtTools": ["interactive-elements"],
  "sessionID": "3f9c…",
  "selectedIDs": [12]
}

段階的選択を使用する際に、以下を心に留めておいてください：

  • インタラクティブ要素IGTのみが実行されます。 igtToolsは両方のコールで正確に["interactive-elements"]でなければなりません。キーボードやモーダルIGTも実行するには、別のコールで実行してください。
  • 第二のコール中にdata.axeは省略される。 戻ってきたAxeの結果は最初のコールでのものです。第二のコールでは、すべてのセットアップパラメータ (viewportWidth, viewportHeight, cookies, before, selector, advancedRules, screenshot, chromePath) は無視されますが、停止されたブラウザセッションはそのまま再利用されます。urlは依然として必要です。
  • includeSelectors は依然として適用されます。 リストに表示される要素を制限するために、最初のコールで渡します。
  • selectedIDs はリストからのものでなければなりません。 候補になかったIDがあれば、コールはstatus: "invalid_selection"に不明なIDを含むunknownIDsで報告します。実行は一時停止され続けるため、エージェントが有効なIDを使用して再試行することができます。
  • 一時停止された実行は期限切れになります。 3分以内に継続されない実行はクローズされ、status: "session_expired"を返します。最大で3の一時停止された実行が同時にオープン可能です。両方の制限はSELECTION_SESSION_TTL_MS および MAX_SELECTION_SESSIONSで構成可能です。期限が切れると、新しいinteractive: trueコールで再開してください。
tip

段階的選択は、大規模なページをテストする際に最もクレジット効率が良い方法です。 最初のコールではインタラクティブ要素にAI分析を実行せず、第二のコールではあなたが選んだ要素のみを分析します。

モーダルダイアログIGTは、ページ上の1つのモーダルダイアログをチェックします。キーボードフォーカスがモーダルが開いている間にモーダル内に留まること、およびモーダルが正しいダイアログセマンティクス（aria-modalおよびモーダルコンテナの役割）を持っていることを確認します。テストがモーダルを開く要素を持っている場合、モーダルが閉じることが可能であり、その後フォーカスが賢明な場所に戻るすることも確認します。

テストがどのモーダルをチェックするかを知る必要があります。それを伝える方法は3つあります。

ターゲティングモード 方法 評価内容
トリガー（おすすめ） modalTriggerSelector — モーダルを開く要素 フォーカスの封じ込め、ダイアログセマンティクス、閉じること、フォーカスリターン
モーダル要素 modalSelector — モーダル要素自体 フォーカスの封じ込めとダイアログセマンティクスのみ
beforeの手順のみ セレクタなし — あなたのbeforeアクションがモーダルを開く フォーカスの封じ込めとダイアログセマンティクスのみ

モーダルにトリガーがある場合はmodalTriggerSelectorを使用 — すべてをチェックする唯一のモードです。テストはトリガーを自分でクリックします。

{
  "url": "http://localhost:3000",
  "igtTools": ["modal"],
  "modalTriggerSelector": "#open-dialog"
}
Analyze http://localhost:3000 and run the modal guided test on the dialog
opened by #open-dialog

クリックするトリガーがない場合、たとえばページの読み込み時に開いているモーダルなどでmodalSelectorを使用します。モーダルが何かの操作後に現れる場合は、beforeを使用して先に開いてください。

{
  "url": "http://localhost:3000",
  "igtTools": ["modal"],
  "modalSelector": "#newsletter-dialog"
}

いずれのセレクタもない場合、テストはbeforeの手順が終了した後で開いているモーダルを確認します。キーストロークの連続やセッションタイムアウト後に表示されるモーダルのように、単一の要素が開かないモーダルに使用します。

{
  "url": "http://localhost:3000",
  "igtTools": ["modal"],
  "before": [
    { "action": "click", "selector": "#settings" },
    { "action": "click", "selector": "#delete-account" }
  ]
}

両方のセレクタは、トップフレーム内の要素のためのCSS文字列またはiframe内の要素に到達するためのセレクタの配列を受け入れます（例：["iframe#app", "#open-dialog"]）、selectorと同じ形式です。

important

トリガーがない場合、空のissuesリストはモーダルが閉じることができることを意味しません。 modalSelectorのみまたはbeforeのみの実行がモーダルを見つけて評価すると、その後terminatedReason: "dismissibility-unavailable"で終了します。これは予期されるものであり、閉鎖およびフォーカスリターンが評価されていないであることを意味しますが、それが合格したことを意味するわけではありません。モーダルが見つからなければ、実行は代わりに他の理由で終了し、例えばmodal-not-detectedやmodal-selector-not-resolvedなどの理由で終了します。終了理由を参照してください。

フォールバックモーダルセレクタの提供

トリガーとモーダル要素の両方を知っている場合は、両方を渡します。テストはトリガーから始まり、すべてを確認します。modalSelectorは、トリガーをクリックした後にモーダルが認識できない場合にのみ使用されます。これは通常、モーダルが非標準のマークアップを使用するためです。

{
  "url": "http://localhost:3000",
  "igtTools": ["modal"],
  "modalTriggerSelector": "#open-dialog",
  "modalSelector": "#custom-dialog"
}

結果はフォールバックが使用されたかどうかを示しません。フォールバックを必要とした実行は、テストがモーダルとして認識できなかった要素をチェックしたため、両方のセレクタを持つ実行からの空のissuesリストを、トリガーのみの実行からのものよりも弱い証拠として取り扱います。

自分ではモーダルを開かないでください

modalTriggerSelectorを渡すとき、テストはトリガーをクリックしてモーダルを開きます。モーダルがすでに開いている場合、そのクリックで通常は再び閉じます。したがって：

  • beforeでトリガーをクリックしないでください。 beforeクリックがmodalTriggerSelectorと同じセレクタに対して行われる場合、エラーで拒否されます。トリガーが存在するページ状態に到達するためにbeforeを使用してください。たとえば、ログインしたり特定のビューに移動したりします。
  • すでに開いているモーダルに対してトリガーを渡さないでください、ページの読み込み時またはbeforeステップから。代わりにmodalSelectorだけを使用してください。

modalTriggerSelectorおよびmodalSelectorはそれぞれigtToolsで"modal"を必要とします。

1回の呼び出しで全てを実行

各IGTには、それぞれのオプションがありますので、1回のanalyze呼び出しでAxeスキャン、高度なルール、および同じページ上のすべてのIGTを実行できます。ページは一度ロードされ準備され、各結果はそれぞれのキーの下に戻ってきます。

Analyze http://localhost:3000 for accessibility issues with thorough
advanced rules. Also run the keyboard, interactive elements, and modal
guided tests (test the modal triggered by button#open-dialog).

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

{
  "url": "http://localhost:3000",
  "advancedRules": "thorough",
  "igtTools": ["keyboard", "interactive-elements", "modal"],
  "modalTriggerSelector": "button#open-dialog"
}

Axeの結果（高度なルールの発見を含む）をdata.axeの下で受け取り、各IGTのエントリがdata.igtの下にあります。

{
  "pageUrl": "http://localhost:3000",
  "advancedRules": { "value": "thorough", "source": "tool_arg" },
  "data": {
    "axe": [],
    "igt": {
      "keyboard": { "status": "complete", "issues": [], "igtElements": [] },
      "interactive-elements": {
        "status": "complete",
        "issues": [],
        "igtElements": []
      },
      "modal": { "status": "complete", "issues": [], "igtElements": [] }
    }
  }
}

IGTはigtToolsにリストされている順に1つずつ実行され、それぞれ個別に報告されます。キートラップや見つからないモーダルが他のテストを止めることはありません。これは、他のすべてのanalyzeオプションでも機能します：beforeステップと、cookiesログイン後のページ、viewportWidthモバイルのブレークポイント、selectorAxeスキャンの範囲指定、screenshot。

note

段階的選択は他のIGTと組み合わせることはできません。複数のIGT呼び出しでインタラクティブエレメンツIGTを制限するにはincludeSelectorsを使用してください。

igtツール

caution

igtツールは廃止予定です。 代わりにanalyzeツールのigtToolsパラメータを使用してください — 同じページ上で同じインテリジェントガイドテストを同じ呼び出しで実行し、Axeスキャンも行います。

igtは完全に機能し続け、これまでと同じ結果を返すので、現時点では何も壊れません。将来のリリースで削除されます。あなたのカスタムエージェント指示がigtツールを指名している場合、それらをanalyzeとigtToolsで呼び出すように更新してください。

igtツールは、Dequeの自動インテリジェントガイドテストをWebページに対してスタンドアロンの呼び出しとして実行します。それが行うすべてのことは、analyzeはアクセシビリティスキャンと共に同じ呼び出しで行います — 使用法とクレジット消費についてはこのページの残りを参照してください。両者は同じです。

テストごとの結果オブジェクトも同じです — status, issues, igtElements, およびオプションのterminatedReason, レスポンスの形状で説明されているように。唯一異なるのは全体の囲みです: igtは結果を直接dataの下で鍵となるテスト名で返します（data.keyboard）、一方でanalyzeはdata.igtとdata.axeの横でそれらをネストします。

Is this page helpful?

Help us improve this page

Still need help?