landmark-main-is-top-level

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

manual確度:medium重大度:minoroperable

mainランドマーク(role="main"または<main>)が、他のランドマーク領域の中に入れ子になっていないことを確認します。

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

期待される結果:どのmainランドマークにも、ランドマーク領域である祖先要素がありません。他のランドマークの中に入れ子になったmain領域は、ページ全体を対象とするトップレベルのメインコンテンツ領域ではなく、ランドマークを使ってナビゲーションする支援技術のユーザーを混乱させます。

例

pass
<main>Content</main>

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

can't tell
<div role="navigation">
<main>Nested main</main>
</div>

mainランドマークがトップレベルではなく、navigationランドマークの中に入れ子になっています。

確認方法

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

LANDMARK_MAIN_NOT_TOP_LEVEL

  1. レポートに示されたmainランドマークと、それが含まれているランドマークを見つけてください。
  2. スクリーンリーダーのランドマーク一覧またはアクセシビリティペインを開き、mainがどこに現れるかを確認してください。
  3. mainがページの主要コンテンツの最も外側のコンテナーであるか確認してください。

満たす場合:mainランドマークはページの最上位にあり、ほかのどのランドマークにも含まれていません。

満たさない場合:mainランドマークがほかのランドマークの中にあり、ランドマークによる移動を混乱させます。これはWAI-ARIAのmainロールに関するベストプラクティスを満たしていません。

ソースコードを見る