landmark-banner-is-top-level

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

manual確度:medium重大度:minoroperable

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

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

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

例

pass
<header>Site header</header>

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

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

他のランドマークの中に入れ子になったbannerランドマークは、もはやページで唯一のトップレベルのヘッダーとして機能しません。

確認方法

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

LANDMARK_BANNER_NOT_TOP_LEVEL

  1. レポートに示されたbanner(headerまたはrole="banner")と、それが含まれているランドマークを見つけてください。
  2. スクリーンリーダーのランドマーク一覧またはアクセシビリティペインを開き、bannerがどこに現れるかを確認してください。
  3. これがページ全体のヘッダーかを判断してください。articleやsectionのヘッダーであれば、bannerにするべきではありません。

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

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

ソースコードを見る