要約
main
要素は、ドキュメント内に、ユーザーが主要なコンテンツにたどりつくために読み飛ばす必要がある導入コンテンツが繰り返されている場合にのみ必要です。
テクニック
-
主要なコンテンツをカプセル化するために
main
要素を使用する[[WCAG-1.3.1]]
例
解説
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
属性を使用してラベルを付けることもできます。
関連リンク
- MDN — <main>
- HTML —main要素
- ARIA — main (role)