ページには複数のバナーランドマークを含めることはできません
修正方法
個別の HTML ページに banner ランドマークが一つのみであることを確認します。
どの banner ランドマークを残したいかを考え、その他の banner ランドマークを削除します。
HTML5 の仕様書は同等の header
ランドマーク値の複数インスタンスを許可していますが、role="banner"
ARIA ランドマークは HTML ドキュメントで一意の要素に一度のみ現れるべきです。ほとんどの web デザインでは、ARIA または HTML5 で指定されているかに関わらず、banner ランドマークは一つのみであることが適切です。
なぜ重要なのか
ランドマークは全盲のユーザーが素早くナビゲートし、コンテンツを見つけることを可能にします。ランドマークが不足していると、スクリーン・リーダーのユーザーは、何を見つけるにしても多くの余分な情報を整理しなければならなくなります。
JAWS、NVDA、そして VoiceOver は ARIA ランドマークを使って web ページのセクションをナビゲートする機能をサポートしています。ランドマークはユーザーが web ページのメインコンテンツにスキップする方法を提供するという問題に対して、より洗練された解決方法を提供します。Web デザインに対して可視な変更は加えられないため、目立たず、不可視にできます。もちろん、この方法が不可視であるという事実は全盲のスクリーン・リーダーのユーザーにとっては問題ありませんが、目の見えるキーボードユーザーやロービジョンのスクリーンを拡大しているユーザーにとっては良くありません。その意味では、HTML5 領域や ARIA ランドマークは昔からの「スキップリンク」をまだ置き換えることはできません。ブラウザーにはまだ、HTML5 領域または ARIA ランドマークが存在することをユーザーに通知する組み込まれた方法がありません。スクリーン・リーダーのユーザーだけがこれらの強みを活かすことができます。Firefox 内でランドマークをナビゲートする機能を追加する Firefox ARIA landmark extension という拡張機能が存在しますが、これはブラウザーのネイティブ機能ではありません。
ルールの説明
banner ランドマークはページに最高でも一つのみであることを確認します。
仕組みについて (簡単に言うと)
このルールはすべての banner ランドマークを探し、それらのロールを反映しないあらゆるランドマークを除外し、複数存在しないことを確認します。