<section>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	文書またはアプリケーション内の汎用的なテーマのまとまり。通常は見出しを伴う
Categories	Flow content、Sectioning content、Palpable content
Context	Sectioning contentを置ける場所
Content model	Flow content
Tag omission	開始tag・終了tagとも省略不可
Content attributes	Global attributes
DOM interface	HTMLElement
HTML-AAM role mapping	accessible nameがある場合はregion、ない場合はgeneric

意味と適用範囲

HTML Living Standard §4.3.3では、sectionはdocumentまたはapplicationの汎用sectionであり、文脈上はテーマ別のグループで、通常は見出しを伴うと定義されています。章、タブ付きUIの各ページ、論文の番号付き節、ホームページの紹介・ニュース・連絡先などが例です。

仕様は、要素の内容がdocument outlineに明示的に載ると適切な場合にsectionを使う一般則を説明しています。また、スタイルやスクリプトのためだけのコンテナーにはdivを使うよう勧めています。この説明を「ブラウザーがsection要素から見出しを生成する」という意味に読み替えてはいけません。

articleは、単独で内容が成り立ち、原則として再配布・再利用できるまとまりに適しています。sectionは、より大きな文書の一部として話題を分ける場合に適します。要素名だけで配色や枠線などの表示は決まりません。

<article>
  <h1>サービスの紹介</h1>
  <section aria-labelledby="plans-heading">
    <h2 id="plans-heading">料金プラン</h2>
    <p>利用方法に合わせて選べます。</p>
  </section>
</article>

見出しとの関係

section自体は見出し要素ではなく、見出しの表示文字列、見出しレベル、DOM上の見出し要素を自動生成しません。見出しはh1〜h6で明示します。見出しレベルは要素名の数字で表され、祖先にsectionがあるだけで自動的に変更されません。

見出し構造は文書の情報階層に合わせます。たとえば、ページの主題にh1、その下位の主題にh2、さらにその一部にh3を使います。過去のHTML outline algorithmへの期待に依存せず、実際に使用する見出し要素のレベルを確認します。

HTML Standardの定義にある「通常は見出しを伴う」という性質と、HTML-AAMにおけるsectionのaccessible nameは別の論点です。見出しが子孫にあるだけで必ずsectionのaccessible nameになるとは限りません。必要な場合はaria-labelledbyで参照関係を明示します。

Accessibility / Region Role

HTML-AAM 1.0 Working Draft（2026-10-21）は、accessible nameがあるsectionにWAI-ARIAのregion role、名前がないものにgeneric roleを指定しています。WAI-ARIAのregionはlandmarkで、支援技術の利用者がページ内の重要な領域へ移動するための役割を持ちます。

マークアップ	HTML-AAM上のrole	確認点
<section>	generic	accessible nameがなく、region landmarkとしては公開されない
<section aria-labelledby="heading-id">	region	参照先が有効で、計算されるaccessible nameが空でない
<section aria-label="...">	region	aria-labelに空でないaccessible nameがある
<section title="...">	region	titleが空でないaccessible nameとして計算される

見える見出しをregionの名前にする場合は、その見出しのidをaria-labelledbyで参照します。空文字、空白だけの値、存在しないID参照では名前が得られない場合があります。選定WPTではこれらのcaseは成功しました。一方、title=""のrole判定はChromeとWPTの期待が一致しませんでした。実装結果は下のEvidenceに記録しています。

region landmarkはページ内の主要な領域を識別するためのものです。小さな見出しごとにすべてnamed regionを付けると、移動先が増え、利用者が探しにくくなる可能性があります。文書構造を表すsectionを使う判断と、landmarkとして名前を付ける判断を分けます。ネイティブのmappingがあるため、通常はrole="region"を重ねて指定する必要はありません。

Fact / Evidence

HTMLの適合性・意味に関する主張、HTML-AAMの規範的mapping、WPTの実行結果、ChromiumのAccessibility Tree観測を別々に記録します。Chrome 155ではtitle=""のsectionが空の名前を持つregionとして観測されましたが、選定WPTは名前のないgenericを期待します。この差は未解決です。

Evidence

1. HTML Living Standard, §4.3.3 The section element — meaning, categories, context, content model, DOM interface, and authoring guidance.
2. HTML Living Standard, Headings and outlines — heading elements and sectioning structure.
3. HTML Accessibility API Mappings 1.0 Working Draft, 2026-10-21: section — conditional region/generic role mapping.
4. WAI-ARIA 1.2, region role — region role definition and landmark semantics.
5. WPT at revision 68d964a5f292bc4b2c2eba2f21e2b916190b6ad2: html-aam/roles-contextual.html — section's conditional computed role.
6. WPT at the same revision: html-aam/names.html — section name sources and precedence.

Implementation Evidence

Browser observations use local Chromium on the four localized topic pages and a dedicated fixture. WPT runs use the pinned WPT checkout shown in the evidence rows. Chromium Accessibility Tree role/name results are implementation observations; they do not measure Windows UI Automation, another platform accessibility API, or screen-reader speech.

Dedicated fixture: section-v1 checks section identity, explicit heading levels, named and unnamed section role/name exposure, responsive layout, and theme controls. Full conditions, results, and unrun scope are recorded in docs/atlas/section-evidence-2026-10-27.md.

Coverage / Open Issues

• Specification checkedMeaning, categories, context, content model, DOM interface, and authoring guidance
• AAM mapping checkedConditional region/generic role and accessible-name sources
• Partial WPT resultSection name checks in names.html passed 8/8. In roles-contextual.html, 33/38 checks passed; Chrome reports region for section title="" where WPT expects generic. Two related empty-title cases fail, along with three unrelated image cases.
• OpenThe empty-title mapping difference, other browsers, Windows platform accessibility APIs, screen-reader speech, and the remaining HTML-AAM/WPT coverage

Related surface

• Yugien: section要素をやさしく確認
• h1〜h6要素: 見出しレベル・Outline・Accessibility
• article要素: 独立した内容とsectionとの境界
• English Atlas: The section Element
• main要素: 主コンテンツと配置条件
• nav要素: ナビゲーション領域と名前