landmark-complementary-is-top-level

complementaryランドマークはトップレベルである必要があります

manual確度:medium重大度:minoroperable

complementaryランドマーク(role="complementary"、または暗黙のロールを保持している<aside>)が、他のランドマーク領域の中に入れ子になっていないことを確認します。

適用範囲:ページにcomplementaryロールを持つ要素が1つ以上ある場合に適用されます。対象は、明示的なrole="complementary"、または暗黙のロールを保持している<aside>です。ElementInternalsによってランドマークロールを与えられたカスタム要素(this.attachInternals().role)は、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じくランドマークです。

期待される結果:どのcomplementary候補にも、ランドマーク領域である祖先要素がありません。補足コンテンツはページのメインコンテンツを補うもので、その横に配置されます。他のランドマークの中に入れ子になると、そのランドマークの一部分になってしまい、ランドマークナビゲーションで伝えられる内容と一致しません。

例

pass
<aside>Related links</aside>

complementaryランドマークは他のどのランドマークの中にも入れ子になっていません。

can't tell
<nav aria-label="Section navigation">
<div role="complementary">Related links</div>
</nav>

navigationランドマークの中に入れ子になったcomplementaryランドマーク。

確認方法

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

LANDMARK_COMPLEMENTARY_NOT_TOP_LEVEL

  1. レポートに示されたcomplementaryランドマーク(asideまたはrole="complementary")と、それが含まれているランドマークを見つけてください。
  2. スクリーンリーダーのランドマーク一覧またはアクセシビリティペインを開き、それがどこに現れるかを確認してください。
  3. mainの中にあって名前がある場合は、よくある関連コンテンツのボックスです。header、footer、navigation、form、または別のcomplementaryの中にある場合は、その不自然な配置を控えてください。

満たす場合:complementaryランドマークは最上位にあるか、mainの中にある名前付きの関連コンテンツのボックスです。

満たさない場合:complementaryランドマークがfooterやnavigationなど関係のないランドマークの中に入れ子になっており、ランドマークによる移動を混乱させます。これはWAI-ARIAのcomplementaryロールに関するベストプラクティスを満たしていません。

ソースコードを見る