region

ページのコンテンツはランドマーク領域の中にあることが望ましいです

manual確度:medium重大度:minoroperable

<body>以下のコンテンツがランドマーク領域の中に含まれていることを確認します。

適用範囲:<body>にコンテンツがあるページに適用されます。コンテンツとは、ランドマークの外にある、自身のテキストまたはaria-labelを持つ要素、<img>、<video>、<audio>、<canvas>、<object>、<embed>、type="hidden"以外の<input>、または中に何かがあるランドマークです。ライブリージョン、ダイアログ、ボタン、<svg>、<iframe>/<frame>、解決可能なスキップリンクは、ランドマークを必要とするコンテンツではありません。モーダルダイアログが開いている間は適用されません。そのときページの残りの部分はinertになるため、スキャンが見るのはページではなくダイアログです。excludeSelectors(全体またはこのルール用)に一致するコンテンツは除外され、報告される欠落箇所にそれが含まれることはありません。ElementInternalsによってランドマークロールを与えられたカスタム要素(this.attachInternals().role)は、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じくランドマークです。

期待される結果:ページのトップレベルのコンテンツはすべて、ランドマーク領域(main、navigation、banner、contentinfo、complementary、region、form、search)の中にあります。これにより、ランドマークでナビゲーションする支援技術のユーザーが、どのランドマークにも入っていないコンテンツを見落とすことがなくなります。

例

pass
<body>
<main>
<p>Everything lives inside a landmark.</p>
</main>
</body>

ページのすべてのコンテンツがランドマーク領域の中に含まれています。

can't tell
<body>
<p>Stray paragraph, not inside any landmark.</p>
</body>

この段落は<body>の直下にあり、どのランドマークにも含まれていません。

確認方法

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

CONTENT_OUTSIDE_LANDMARK

  1. レポートに示されたコンテンツ(またはiframe)をページ上で見つけてください。
  2. 開発者ツールのアクセシビリティペインまたはスクリーンリーダーのランドマーク一覧を開き、それを含むランドマークがあればどれかを確認してください。
  3. それが既存のランドマーク(header、nav、main、footer、aside)に属するべきものか、すべてのランドマークの外にあるのかを判断してください。

満たす場合:コンテンツはランドマークの中にあるか、ランドマークを必要としないもの(スキップリンクやダイアログなど)です。

満たさない場合:実際のページのコンテンツがすべてのランドマークの外にあるため、ランドマークで移動する人が見落とす可能性があります(ベストプラクティス、ARIA11)。

ソースコードを見る