要約

出版物のセクションを明確にすると、ユーザーがコンテンツを読み進めたり、内容を理解し易くなります。

テクニック

例

例1 — 章（チャプター）の特定

doc-chapterロールは、 section要素に適用され、この中に章が含まれていることを識別します。ロールを使用してaria-labelledby属性で見出しを識別すると、支援技術でランドマーク（目印）が作成されます。

<section role="doc-chapter" aria-labelledby="hd01">
   <h1 id="hd01">Chapter 1. Loomings.</h1>
   <p>Call me Ishmael. … </p>
   …
</section>
例 2 — 題が付いていないセクション

aria-label属性は、テキスト内の色のみで区別されるセクションを識別するために使用されます。

<section aria-label="Self-examination tests">
   …
</section>
例3 — 副題（サブタイトル）の識別
<section role="doc-chapter" aria-labelledby="hd02">
   <hgroup>
      <h1 id="hd02">1. Europe 1930-1935</h1>
      <p role="doc-subtitle">The Foreshadows of War</p>
   </hgroup>
   …
</section>
例4 — ランドマーク（目印）ではないサブセクションの追加

section要素にはrole属性がなく、 aria-labelledby属性を使用してアクセシブルな名前を識別しないため、支援技術のランドマーク（目印）は作成されません。

<section>
   <h4>2.4.1 Electrical Impedance</h3>
   …
</section>

よくある質問

すべてのセクションをランドマーク（目印）にする必要がありますか?

いいえ、ランドマークは代替の目次として機能することを意図したものではありません。ランドマークはフラットなリストとしてユーザーに表示されるため、出版物の構造が失われ、出版物内を移動するための効果的な手段にはなりません。

一般的には、作品の主要なセクション (章など) と、ユーザーがすぐにアクセスしたい重要な前書きおよび参照セクションを識別するためにのみ用いるのをお勧めします。ランドマークが多すぎると、ユーザーにとっての有用性が低下します。

セクションをランドマークにしないようにするには、セクションにロールやアクセシブルな名前を追加しないでください (つまり、section要素にはrole 、aria-labelledby 、aria-label 、title属性を付けないでください)。

補助的なコンテンツにはsection要素を使用する必要がありますか?

いいえ、サイドバーやミニ記事などの自己完結型の補助コンテンツは、必要に応じてasideとarticle要素を使用して識別する必要があります。詳細については、 asidesおよびarticlesページを参照してください。

パートの取り扱い方法は？

出版物では、レンダリング速度を向上させるために小さなコンテンツ ファイルに分割し、1つのファイルに全体を組み込めないことがよくあります。問題は、章（チャプター）を別々のファイルに分割しながら、パートを保持するにはどうすれば良いかという点です。

コンテンツをフラットにするには2つの方法がありますが、少なくともマークアップ内の元の構造階層を保持するという点では、どちらも最適ではありません。1つ目は、最初の章（チャプター）にパート見出しを組み込む方法です。

<body>
   <section role="doc-part" aria-labelledby="hd01">
	  <h1 id="hd01">Part I</h1>
	  <section role="doc-chapter" aria-labelledby="hd02">
		 <h2 id="hd02">Chapter I</h2>
	  </section>
   </section>
</body>

後続の各章ファイルには、 h2見出しを持つ 1 つのsectionが含まれます。このマークアップアプローチでは、そのパートには 1 つの章のみが含まれているように見えますが、一貫した見出し番号付けにより、支援技術によってユーザーを正しく誘導できます。

もう一つは、パート見出しを独自のファイルに分離する方法です。

<body>
   <section role="doc-part" aria-labelledby="hd01">
	  <h1 id="hd01">Part I</h1>
   </section>
</body>

後続する各章のファイルには、その章がパートに従属していることを示すh2見出しを付けます。このアプローチの利点の1つは、ユーザーエージェントがパート見出しを最初の章のコンテンツとは別にレンダリングすることです。

解説

section要素は、主要なコンテンツのセクションをカプセル化し、出版物の構造階層を確立するために使用されます。コンテンツを明確にグループ化して識別することで、支援技術を使用して読むすべてのユーザーがより適切にナビゲートできるようになります ( FAQ も参照)。

該当する場合、role属性をsectionに追加して、コンテンツの特定の性質を示せます。属性で使用できる値のリストについては、Digital Publishing WAI-ARIA モジュールを参照してください。

role指定が無い場合には、ネストレベル（入れ子階層の深さ）に基づいて一般的なセクション/サブセクションの性質が導かれます。

sectionに複数の子見出しは組み込めません。見出しタグを使用して副題を追加しないでください。支援技術のユーザーにはサブセクションとして表示されてしまうためです。

セクションに見出しがない場合は、sectionの目的を識別させるためにaria-label属性の付与を検討してください。

関連リンク