iframeの解析

ページはしばしば<iframe>要素内に重要なコンテンツを配置します：支払いフォーム、メディアプレーヤー、埋め込みマップ、チャットやヘルプウィジェット、およびサードパーティのコンポーネント。CLIは通常のページ解析の一部としてこれらのフレームのコンテンツを解析するため、フレーム化されたコンテンツがカバレッジのギャップになることはありません。

有効にする必要はありません。axe-coreはページのフレームに読み込まれ、各フレームはトップレベルのドキュメントとともに解析され、その結果はページの同じJSON結果ファイルにまとめられます。

フレーム結果の報告方法

フレームからの結果は、ページの残りの部分と同じviolations、passes、incomplete、inapplicable配列に入ります。それを識別するのは各結果ノード上のtarget配列です：それはフレームのネスティングレベルごとに1つのセレクターを保持し、その後に要素自体のセレクターが続きます。

• 1つのエントリーを持つtargetはトップレベルドキュメントの要素を示します。
• 2つのエントリーを持つtargetは1つのフレーム内の要素を示します：最初のセレクターは親ドキュメントのフレームを見つけ、2番目のセレクターはそのフレームのドキュメント内の要素を見つけます。
• 各追加エントリーはフレームネスティングの別のレベルを示します。

これは、レポートがページ自体のHTMLに存在しない要素を指し示すことを意味します。要素が実際にどこにあるのかを見つけるために、target配列を外側から内側に向かって読みます。

フレーム内の要素をターゲットにする方法

フレーム内の要素に対してアクションを行うか解析を行うには、スペックファイルを使用し、セレクターをリストとして指定します。リスト内のすべてのセレクターは最後を除いて連続する<iframe>要素を識別してナビゲートし、最後のセレクターが最も内側のフレーム内のターゲット要素を識別します。完全なルールと例についてはセレクターを参照してください。

# Analyze only the card form inside the card-fields frame,
# which is itself inside the payment-widget frame
analyze only element ["iframe.payment-widget", "#card-fields", "form"]

# Analyze the page, but skip everything inside a third-party frame
analyze the page excluding element [".third-party-frame", "html"]

リストは[と最初の引用符の間にスペースを入れずに記述してください、そうでないとスペックファイルは検証に失敗します。

フレーム対応のセレクターはページアクションでもanalyzeでも機能するため、ワークフローは結果を解析する前にフレーム内のボタンをクリックしたりフィールドを記入したりできます。ページアクションを参照してください。

フレームとURIモード

axe <url>の--includeおよび--excludeオプションはカンマ区切りのCSSセレクターリストを取り、トップレベルドキュメントのみに対して評価されるため、フレーム内の要素をターゲットにすることはできません。フレーム内のコンテンツは依然として解析されますが、コマンドラインからそれに範囲を指定することはできません。

知っておくべき2つの結果があります：

• フレーム要素の名前を付けると、--include "#checkout-frame"のように、解析はそのフレームとその内部のすべてに範囲を限定します。フレームのコンテンツはそれとともに解析されるからです。
• 最初のセレクターの後の追加セレクターは、トップレベルドキュメントに一致しない場合、黙って無視されると見なされます。--include "#outer,#inner,#leaf"は--include "#outer"とまったく同じ結果をもたらし、経路の残りが省略されたことに警告はありません。フレーム内にのみ存在するセレクターはNo elements found for include in page Contextで完全に失敗します。

フレーム内の何かをターゲットにする必要がある場合は、スペックファイルを使用してください。

関連トピック

• スペックファイルを使ってページを解析する
• Axe DevTools for Web APIを使用したiframeの解析