main、nav、aside などの HTML5 要素は、ランドマーク、つまりスクリーン リーダーなどの支援技術がジャンプできるページ上の特別な領域として機能します。ランドマーク要素を使用すると、支援技術を利用するユーザーのサイトのナビゲーション エクスペリエンスを大幅に改善できます。詳しくは、デク大学の 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 のユーザー補助インサイト拡張機能などのツールを使用して、ページ構造を可視化し、ランドマークに含まれていないセクションを検出することもできます。
ランドマークの効果的な使用方法
<div>や<span>などの汎用的な要素に依存するのではなく、ランドマーク要素を使用してページの主要セクションを定義します。- ランドマークを使用してページの構造を伝えます。たとえば、
<main>要素にはページのメインアイデアに直接関連するすべてのコンテンツを含める必要があるため、1 つのページに 1 つだけ配置します。各ランドマークの使用方法については、MDN のコンテンツ セクション化要素の概要をご覧ください。 - ランドマークは慎重に使用してください。ランドマークが多すぎると、支援技術のユーザーが目的のコンテンツに簡単にスキップできなくなるため、ナビゲーションが難しくなる可能性があります。
詳しくは、見出しとランドマークの投稿をご覧ください。