main、nav、aside などの HTML5 要素は、ランドマークとして機能します。ランドマークとは、スクリーン リーダーやその他の支援技術がジャンプできるページ上の特別な領域です。ランドマーク要素を使用すると、支援技術を使用しているユーザーのサイト上のナビゲーション エクスペリエンスを大幅に改善できます。詳しくは、Deque University の HTML 5 と ARIA のランドマークをご覧ください。
ランドマークを手動で確認する方法
W3C のランドマーク要素のリストを使用して、ページの各主要セクションがランドマーク要素に含まれていることを確認します。次に例を示します。
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>
Microsoft のAccessibility Insights 拡張機能などのツールを使用して、ページ構造を可視化し、ランドマークに含まれていないセクションを検出することもできます。
ランドマークを効果的に使用する方法
<div>や<span>などの汎用要素に頼るのではなく、ランドマーク要素を使用してページの主要なセクションを定義します。- ランドマークを使用して、ページの構造を伝えます。たとえば、
<main>要素には、ページの主なアイデアに直接関連するすべてのコンテンツを含める必要があります。そのため、ページごとに 1 つだけにする必要があります。各ランドマークの使用方法については、MDN のコンテンツ分割要素の概要をご覧ください。 - ランドマークは慎重に使用してください。ランドマークが多すぎると、ユーザーが目的のコンテンツに簡単にスキップできなくなるため、ユーザー補助技術を使用しているユーザーにとってナビゲーションがより難しくなる可能性があります。
詳しくは、ヘディングとランドマークに関する投稿をご覧ください。