landmark-banner-is-top-level
bannerランドマークはトップレベルである必要があります
bannerランドマーク(role="banner"、または入れ子になっていない<header>)が、他のランドマーク領域の中に入れ子になっていないことを確認します。
適用範囲:ページにbannerの候補が1つ以上ある場合に適用されます。候補は、明示的なrole="banner"、またはrole属性をまったく持たない<header>で、入れ子かどうかは問いません。ElementInternalsによってランドマークロールを与えられたカスタム要素(this.attachInternals().role)は、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じくランドマークです。
期待される結果:どのbanner候補にも、ランドマーク領域である祖先要素がありません。他のランドマークの中に入れ子になったbannerは、ページ全体を対象とするトップレベルのbannerではなく、ランドマークを使ってナビゲーションする支援技術のユーザーを混乱させます。
例
<header>Site header</header>
bannerは他のどのランドマークの中にも入れ子になっていません。
<div role="navigation"><div role="banner">Nested banner</div></div>
他のランドマークの中に入れ子になったbannerランドマークは、もはやページで唯一のトップレベルのヘッダーとして機能しません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
LANDMARK_BANNER_NOT_TOP_LEVEL
- レポートに示されたbanner(headerまたはrole="banner")と、それが含まれているランドマークを見つけてください。
- スクリーンリーダーのランドマーク一覧またはアクセシビリティペインを開き、bannerがどこに現れるかを確認してください。
- これがページ全体のヘッダーかを判断してください。articleやsectionのヘッダーであれば、bannerにするべきではありません。
満たす場合:bannerはページの最上位にあり、ほかのどのランドマークにも含まれていません。
満たさない場合:bannerがほかのランドマークの中にあり、ランドマークによる移動を混乱させます。これはWAI-ARIAのbannerロールに関するベストプラクティスを満たしていません。