iframe-focusable-content

tabindex="-1"のフレームにフォーカス可能なコンテンツを含めてはいけません

automaticWCAG 2.1.1 (A)確度:high重大度:moderateoperable

tabindex="-1"を持つ同一オリジンの<iframe>/<frame>要素が、キーボードのユーザーが到達できないフォーカス可能なコンテンツを含まないことを確認します。負のtabindexは、フレームのコンテンツ全体をタブ順序から外すためです。

適用範囲:明示的な負のtabindexを持つ<iframe>/<frame>要素のうち、埋め込み文書が同一オリジンで、contentDocumentからアクセスできるものに適用されます。クロスオリジンのフレームなど中にアクセスできないフレームは内部を調べられないため、何も判定しません。

期待される結果:フレームの埋め込み文書に、シーケンシャルフォーカスナビゲーション順序に含まれる要素がありません。<iframe>の負のtabindexは、そのブラウジングコンテキスト全体をタブ順序から外します。Tabキーは中のものをすべてスキップするため、そこにあるリンクやコントロールにはキーボードで到達できません(ACT akn7bn。ChromiumではTabキーでフレームの前の要素から後の要素へ移動します)。要素がこの順序に含まれるかどうかは、フレーム自身の文書の中でHTMLの規則に従って判断します。無効(:disabled。無効な<fieldset>は該当しますが、その最初の<legend>は該当しません)またはinertの場合は含まれません。整数として解析できるtabindexがあればそれで決まり、無効な値(""、"abc")は無視します。それ以外の場合は、hrefを持つリンク、hidden以外のフォームコントロール、フレーム、controlsを持つメディア、レンダリングされた<img>が使うイメージマップの<area>(usemapは完全一致で照合)、<details>の最初の<summary>、編集ホスト(contenteditableが""、"true"、"plaintext-only")が含まれます。例外:widthとheightのHTML属性がどちらも2px以下のiframe(よくある「トラッキングピクセル」のパターン)は知覚できるコンテンツをレンダリングできないため、その中のフォーカス可能なコンテンツはACT akn7bnの「可視」の要件を満たすことがなく、数に入りません。

例

pass
<iframe tabindex="-1" width="300" height="150" srcdoc="<p>No focusable content</p>"></iframe>

tabindex="-1"がフレームをタブ順序から外しており、中にもフォーカス可能なものはありません。

fail
<iframe tabindex="-1" width="300" height="150" srcdoc="<a href='/x'>Link inside</a>"></iframe>

ホストのフレームはtabindex="-1"でスキップされますが、中のリンクには引き続きTabキーで到達できます。ブラウザーは負のtabindexを埋め込み文書に伝播しません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

IFRAME_TABINDEX_NEGATIVE_CONTENT_RUNTIME_REDIRECT

  1. レポートに示されたフレームのすぐ手前でページをクリックし、Tabキーを押してフレームの方へ移動してください。
  2. Tabキーを押し続け、フォーカスがフレームの内側に移ることがあるか、またフレームに届くはずのときにどこへ移るかを観察してください。
  3. [Elements]パネルでフレーム内のフォーカス可能な要素を調べ、それが空のフォーカスガードか、内容のある実際のリンクやコントロールかを控えてください。
  4. 実際のリンクやコントロールであれば、ほかのあらゆるキーボードでの経路(Shift+Tab、フレーム自身のコントロール)を試し、到達して使えるか確認してください。

満たす場合:フレーム内で唯一のフォーカス可能な要素は、フォーカスを先へ送る空のフォーカスガードであり、フレーム内で利用者が必要とするものはすべてキーボードで到達できます。

満たさない場合:フォーカスが飛ばされるか跳ね返されるため、フレーム内の実際のリンクやコントロールにキーボードで到達できないか使えず、WCAG 2.1.1を満たしません。

ソースコードを見る