main、nav、aside などの HTML5 要素はランドマークとして機能します。
そのページ内の特定のページへの
スクリーン リーダーなどの支援技術が飛躍的に進化する可能性があります。
ランドマーク要素を使用すると、
サイトの操作性を大幅に向上させ
支援技術のユーザーのために
設計されています
詳しくは、Deque 大学の
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 の概要をご覧ください。 ご覧ください。 - ランドマークは慎重に使用します。ランドマークが多すぎると 支援技術を利用するユーザーにとってナビゲーションがより困難になります。 目的のコンテンツへ簡単にスキップできなくなります。
見出しとランドマークの投稿をご覧ください。 をご覧ください。