メインランドマークは別のランドマークに含まれてはいけません

メインランドマークが別のランドマークに含まれていないことを確認する。

すべてのコンテンツが、HTML5ランドマーク要素および/またはARIAランドマーク領域で指定されたランドマーク領域内に含まれていることを確認する。

すべてのコンテンツがナビゲーション領域内に含まれるようにするには、HTML5とARIAランドマークの両方を使用するのが ベストプラクティス こと。HTML5では、 <header>、 <nav>、 <main>、 <footer> などの要素を使用する。ARIAの対応する要素は、順に role="banner"、 role="navigation"、 role="main"、 role="contentinfo" です。HTML5とARIAマークアップの両方を使用すると、どのスクリーンリーダーテクノロジが使用されている場合でも、Webページをより堅牢かつ機能的にすることができます。

追加されると、スクリーンリーダーユーザーはARIAランドマークまたはHTML要素に基づいてセクションに移動できるようになります。contentinfo ランドマークは、ナビゲーションスキップリンクの簡単な代替手段を提供しますが、この代替手段はスクリーンリーダーのユーザーにとってのみ役立ちます。目の見えるユーザーや画面拡大機のユーザーは、この追加機能からあまり恩恵を受けられないため、 contentinfo ランドマークはスキップナビゲーションリンクを完全に置き換えるものではありません。

例

ランドマークの必要最低限の要素だけに絞り込んだ簡素化されたWebページは次のようになります。

<header role="banner">
   <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

リージョンとロールのマークアップは冗長ですが、これは移行期間であり、上記のマークアップが最も堅牢です。