要約

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

テクニック

例

例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属性を含めることを検討してください。

関連リンク