iframeの分析
Axe DevTools for Web APIsがiframe内のコンテンツをどのように分析するか、そしてフレーム分析の範囲を設定または制限する方法について。
ページは<iframe>要素内に多数のコンテンツを配置することがよくあります：支払いフォーム、メディアプレーヤー、埋め込み地図、チャットやヘルプウィジェット、そしてサードパーティコンポーネントです。Axe DevTools for Web APIsは、それらのフレームのコンテンツを通常のページ分析の一部として分析します。すべての対応言語でフレーム化されたコンテンツが漏れず、別個のテストセットを必要としません。
何かをオンにする必要はありません。axe-coreはページのフレームにロードされ、各フレームはトップレベルドキュメントと共に分析され、その結果はページの一つのレポートにまとめられます。
フレーム結果の報告方法
フレームからの結果は、ページの他の部分と同じviolations、passes、incomplete、inapplicable配列に到着します。それを識別するのは、各結果ノードにあるtarget配列です：それはフレームネストの各レベルにつき1つのセレクタを保持し、次に要素自体のセレクタを配置します。
- 1つのエントリーを持つ
targetはトップレベルドキュメントの要素です。 - 2つのエントリーを持つ
targetは1つのフレーム内の要素です：最初のセレクタは親ドキュメント内のフレームを見つけ、2番目のセレクタはそのフレームのドキュメント内の要素を見つけます。 - 追加のエントリーは、さらにフレームネストのレベルを表します。
完全な結果構造については、ブラウザJavaScript APIリファレンスを参照してください。
フレームへのまたはフレーム内での分析のスコープ設定
includeおよびexcludeセレクタを受け入れるすべてのAPIは、ネストされたフレームを通るパスも受け入れます。ルールはすべての言語で同じです：最後のセレクタ以外は連続する<iframe>要素と一致し、最後の1つが最も内側のフレーム内の分析する要素と一致します。順序は重要です。フレームはそれ内の要素の前になければなりません。
| 言語 | フレーム内の要素をターゲットにする方法 | リファレンス |
|---|---|---|
| Node.jsおよびJavaScript | セレクタの配列をincludeまたはexcludeに渡す |
ブラウザJavaScript APIリファレンス |
| C# | Including/Excludingの複数セレクタ、またはFromFramesセレクタ |
C# APIリファレンス |
| Java | including/excludingのList<String>、またはHamcrestによるIFrameSelector |
Seleniumテスティング、Hamcrest APIリファレンス |
| Python | including()/excluding()の複数セレクタ |
Python APIリファレンス |
| Ruby | within句とiframe:およびselector:ハッシュ |
RSpec |
セレクタのリストは常にフレームを通るパスとして読み取られるため、いくつかの無関係な要素を選択するためには使用できません。ページの複数の領域を分析するには、領域ごとにincludeまたはexcludeメソッドを1回呼び出します。
フレーム分析の制限
フレームはページをより動的にしますが、分析が実行されている間にフレームが追加または削除されるページでは、すべてのフレームにaxe-coreを注入することが失敗する場合があります。Java APIはトップレベルドキュメントの分析に制限するフェイルセーフを提供します：実行前にdisableIframeTesting()を呼び出し、axe-coreは任意のフレームに注入されません。Seleniumテスティングを参照してください。
axe-coreiframes実行オプションは、これらのAPIでフレーム分析をオフにしません。各ライブラリがaxe-coreをブラウザードライバを通してフレームに注入するので、分析はオプションが設定されているかどうかにかかわらずフレーム結果を報告します。分析範囲を制限するには、代わりにフレームを除外し、使用言語のexcludeメソッドを活用します。
クロスオリジンおよびサンドボックス化されたフレーム
フレームは、axe-coreが内部で実行され、それが結果を報告できる場合にのみ分析されます。
クロスオリジンフレームは分析されます。 これらのAPIは実際のブラウザセッションを駆動し、ドライバを通して各フレームにaxe-coreを注入するため、異なるオリジンから提供されるフレームも他のフレームと同様に分析され、その結果はページ全体の一部として表示されます。
サンドボックス化されたフレームはライブラリに依存します。 sandbox属性がallow-scriptsを省略したフレームは、axe-coreが必要とするスクリプトの実行をブロックします。いくつかのライブラリではこれを回避してフレームを分析する方法がありますが、他のライブラリではフレームが未テストとして報告されます。Python APIはwithout_iframe_sandboxes()を提供し、そのフレーム内でaxe-coreが実行できるようにsandbox属性を削除します。Python APIリファレンスを参照してください。
axe-coreframe-testedルールを使用して、「このフレームには問題はありません」と「このフレームは一度も分析されていません」を区別します。axe-coreが届かなかったフレームは不完全として報告され、到達したフレームはそのルールを通過します。これはベストプラクティスルールであるため、ルールセットにベストプラクティスルールが含まれる場合のみ表示され、WCAGルールに限定されたルールセットでは省略され、未分析のフレームは全くシグナルを発しません。