identical-iframes-same-purpose

同じ名前のフレームは同じリソースを埋め込んでいます

automaticWCAG 4.1.2 (A)確度:medium重大度:moderaterobust

アクセシブルな名前を共有する<iframe>/<frame>要素が同じリソースを埋め込んでいることを確認します。1つの名前が説明できるのは1つのリソースだけだからです。

適用範囲:アクセシビリティツリーに含まれ、空でない同じアクセシブルな名前(空白を圧縮して比較)を共有する、2つ以上の<iframe>/<frame>要素の各組に適用されます。何にも名前を付けない仕組みだけで名前が付けられたフレームや、アクセシビリティツリーから隠されたフレームは組に含まれません。組が成立するには、条件を満たす要素が2つ残っている必要があります。

期待される結果:組内のすべてのフレームが同じリソースに解決されます。共有された名前は1つのリソースを説明するものなので、その名前を持つ2つのフレームは同じリソースを埋め込んでいる必要があります。

検出結果が報告する内容:

  • name:フレームが共有しているアクセシブルな名前です。
  • resource:このフレームが埋め込んでいるアドレスで、フラグメントを除いた絶対URLです。srcを解決できなかった場合(IFRAME_RESOURCE_UNRESOLVED)は空(null)です。
  • setSize:その名前を共有しているフレームの数です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<iframe title="Weather widget" src="https://example.test/weather"></iframe>
<iframe title="Weather widget" src="https://example.test/weather"></iframe>

2つのフレームが名前「Weather widget」を共有し、同じリソースを埋め込んでいます。

can't tell
<iframe title="Weather widget" src="https://example.test/weather?city=nyc"></iframe>
<iframe title="Weather widget" src="https://example.test/weather?city=sf"></iframe>

2つのフレームが同じ名前を共有していますが、異なるリソースに解決されます。正当に同等な2つのウィジェットかもしれませんし、ラベルの誤ったフレームかもしれません。マークアップだけでは判断できません。

確認方法

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

IFRAME_RESOURCE_DIFFERS

  1. レポートに示されたフレームを見つけ、共有されているアクセシブルな名前(通常はtitle)を控えてください。
  2. 各フレームが表示している内容と、そのsrcのアドレスを確認してください。
  3. それらが同じ役割を果たす(同じ地図やウィジェットで、トラッキング用のパラメーターだけが異なる)か、異なる役割を果たす(2つの異なる動画)かを判断してください。

満たす場合:フレームは同じ目的を果たしているため、名前を共有していても問題ありません。

満たさない場合:フレームが同じ名前で異なるコンテンツを埋め込んでおり(どちらも「YouTube video player」というタイトルの2つの異なる動画など)、利用者が区別できないため、WCAG 4.1.2を満たしません(ACT 4b1c6c)。

IFRAME_RESOURCE_UNRESOLVED

  1. レポートに示されたフレームを見つけ、共有されているアクセシブルな名前を控えてください。
  2. 各フレームをスクロールして表示し、遅延読み込みされるコンテンツを読み込ませてから、そのsrc、data-src、またはsrcdocを調べてください。
  3. 各フレームが表示している内容を比べ、同じ役割を果たしているか判断してください。

満たす場合:フレームは同じ目的を果たしているため、名前を共有していても問題ありません。

満たさない場合:フレームが同じ名前で異なるコンテンツを表示しており、利用者が区別できないため、WCAG 4.1.2を満たしません(ACT 4b1c6c)。

ソースコードを見る