landmark-complementary-is-top-level
complementaryランドマークはトップレベルである必要があります
complementaryランドマーク(role="complementary"、または暗黙のロールを保持している<aside>)が、他のランドマーク領域の中に入れ子になっていないことを確認します。
適用範囲:ページにcomplementaryロールを持つ要素が1つ以上ある場合に適用されます。対象は、明示的なrole="complementary"、または暗黙のロールを保持している<aside>です。ElementInternalsによってランドマークロールを与えられたカスタム要素(this.attachInternals().role)は、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じくランドマークです。
期待される結果:どのcomplementary候補にも、ランドマーク領域である祖先要素がありません。補足コンテンツはページのメインコンテンツを補うもので、その横に配置されます。他のランドマークの中に入れ子になると、そのランドマークの一部分になってしまい、ランドマークナビゲーションで伝えられる内容と一致しません。
例
<aside>Related links</aside>
complementaryランドマークは他のどのランドマークの中にも入れ子になっていません。
<nav aria-label="Section navigation"><div role="complementary">Related links</div></nav>
navigationランドマークの中に入れ子になったcomplementaryランドマーク。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
LANDMARK_COMPLEMENTARY_NOT_TOP_LEVEL
- レポートに示されたcomplementaryランドマーク(asideまたはrole="complementary")と、それが含まれているランドマークを見つけてください。
- スクリーンリーダーのランドマーク一覧またはアクセシビリティペインを開き、それがどこに現れるかを確認してください。
- mainの中にあって名前がある場合は、よくある関連コンテンツのボックスです。header、footer、navigation、form、または別のcomplementaryの中にある場合は、その不自然な配置を控えてください。
満たす場合:complementaryランドマークは最上位にあるか、mainの中にある名前付きの関連コンテンツのボックスです。
満たさない場合:complementaryランドマークがfooterやnavigationなど関係のないランドマークの中に入れ子になっており、ランドマークによる移動を混乱させます。これはWAI-ARIAのcomplementaryロールに関するベストプラクティスを満たしていません。