landmark-no-duplicate-banner
ページにbannerランドマークを複数置いてはいけません
ページ内のbannerランドマーク(role="banner"、または入れ子になっていない<header>)が多くても1つであることを確認します。
適用範囲:ページにbannerランドマーク(明示的なrole="banner"、または暗黙的で入れ子になっていない<header>。landmark-banner-is-top-levelと同じ方法で検出します)が1つ以上ある場合に適用されます。ElementInternalsによってランドマークロールを与えられたカスタム要素(this.attachInternals().role)は、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じくランドマークです。
期待される結果:ページ内のbannerランドマークは多くても1つです。WAI-ARIA Authoring Practicesによれば、bannerランドマークはページ全体を識別するサイト単位のコンテンツを表すため、複数あるとランドマークでナビゲーションする支援技術のユーザーにとって曖昧になります。
検出結果が報告する内容:
count:ページが支援技術に公開しているbannerランドマークの数です。上限は1です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<body><header>Site header</header></body>
bannerランドマークは1つだけです。
<body><header>First</header><header>Second</header></body>
トップレベルの<header>要素が2つあり、どちらもbannerロールになります。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
LANDMARK_DUPLICATE_BANNER
- スクリーンリーダーのランドマーク一覧またはアクセシビリティペインを開き、bannerランドマークの数を数えてください。
- レポートに示されたそれぞれについて、ページ全体のヘッダーか、セクション、カード、ダイアログのヘッダーかを判断してください。
- 隠れている、または閉じているコピー(閉じたメニュー内のヘッダーなど)が支援技術から確実に隠されていることを確認してください。
満たす場合:支援技術が検出するbannerは、ページ全体のヘッダーの1つだけです。
満たさない場合:複数のbannerが公開されているため、ランドマークによる移動でページのヘッダーが複数示されます。これはWAI-ARIAのbannerロールに関するベストプラクティスを満たしていません。