landmark-contentinfo-is-top-level

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

manual確度:medium重大度:minoroperable

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

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

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

例

pass
<footer>Site footer</footer>

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

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

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

確認方法

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

LANDMARK_CONTENTINFO_NOT_TOP_LEVEL

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

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

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

ソースコードを見る