要約

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属性を使用してラベルを付けることもできます。

関連リンク