セクション化要素はページを意味のある領域に分割します。そのうちのいくつかはARIAランドマークにマップされます — ページの目次のように、支援技術がユーザーが移動できる名前付き領域です。
html
...
Details
...
...
スクリーンリーダーユーザーはキーを押してランドマークを一覧表示し、繰り返されるヘッダーやナビゲーションをスキップして<main>に直接ジャンプできます。これは大きな効率性向上です — セマンティックタグはそれを自動的に提供します。ARIAは不要です。
<article> — それ自体で意味をなし、配信される可能性があるコンテンツ: ブログ記事、製品カード、コメント。<section> — ドキュメント内のテーマ別**グループ化。通常は独自のheadingを持ちます。スタンドアロンではありません。<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
一般的なルール: 単独で存在できれば<article>です。より大きな全体の単なるラベル付きチャンクであれば<section>です。スタイリングラッパーとしてのみ<section>を使用しないでください — それは<div>の目的です。
正しいセクション化要素を使用することで、キーボード/スクリーンリーダーナビゲーションのための無料で堅牢なランドマークと明確なドキュメントアウトラインが得られます。これにより、追加のARIA属性なしでアクセシビリティとSEOが向上します。