要約

ドキュメント内でユーザーが主要なコンテンツに行き着くためには読み飛ばす必要がある導入コンテンツが繰り返されている場合にのみ、main要素が必要になります。

テクニック

例

例 1 — ページヘッダーの繰り返し

次の例は、固定レイアウトの出版物において、繰り返し表示されているページヘッダーを読み飛ばすためにmain要素を使う方法を示しています。

<body>
   <header>
      <div class="pagenum even" role="doc-pagebreak">4</div>
      <div class="pub">Moby Dick</div>
      <div class="chap">I. Loomings</div>
   </header>
   <main>
      <!-- primary narrative of the page -->
   </main>
</body>

解説

main要素は、Webページの主要コンテンツを識別するために使用します。これはHTML5で導入され、ページの上部に「コンテンツへスキップ」リンクを配置するという従来の方法に対する解決策を提供します。これにより、支援技術のユーザーは、周辺の繰り返しコンテンツ（サイトヘッダー、ナビゲーション、広告など）を読み飛ばせます。

main要素は支援技術によってランドマーク（目印）として扱われるため、main要素が存在する場合、ユーザーはその要素に直接ジャンプできます。これはARIA のmainロールに相当します。

ただし、デジタル出版物でバイパス（読み飛ばし）リンクが必要になることは、Web 全般の場合ほど一般的ではありません。出版物は Web ページの飾りの中に包まれていないため、主要なコンテンツの開始を識別することでメリットを得られる出版物は多くありません。固定レイアウトの出版物には、繰り返しページヘッダーが含まれる場合がありますが、それもまれです。

主要な物語の前にあるという理由だけで、main要素を使用して重要なコンテンツを省略してしまわないように注意する必要があります。たとえば、教科書では、章の見出し、ミニ目次、学習オブジェクトなどのコンテンツが章の本文の前に出現することがありますが、これらはいずれも重複コンテンツではありません。これらは各章に固有のものです。 main要素の前に配置すると、ユーザーが見逃してしまう可能性があります。

HTMLのbody要素には、hidden属性が指定されていないmain要素は1つだけしか組み込めない点に注意してください。また、articleやasideなどのコンテンツに独自のmainコンテンツセクションを設けることはできません。

インスタンスが 1 つしかない場合は、 main要素にラベルを付ける必要はありませんが、インスタンスが複数ある場合は、 aria-labelまたはaria-labelledby属性を使用してラベルを付けることもできます。

関連リンク