<aside>要素 — 補足コンテンツ・Sectioning・Complementary Mapping

Technical Summary

仕様上の定義と分類

HTML Living Standardは、asideを「周囲の内容と関連するが、そこから分けてもよい内容を含むページ内の区分」と定義します。仕様が挙げる使い方には、補足説明、引用の抜粋、広告、サイドバー、複数のnavのグループがあります。これは列挙された表示用途をすべてasideにすべきという意味ではなく、各内容が周囲の本文から独立した補足として成り立つかを確認します。

section・article・figureとの境界

asideとほかのsectioning content要素の区別は、見た目やサイズではなく、まとまりの役割で行います。要素間の組み合わせは排他的ではありません。たとえば、articleの中に、その記事の補足としてasideを含められます。

仕様例にサイドバーがあることは、レイアウト上横に置く内容なら何でもasideであることを意味しません。CSSで位置を変更しても、HTML上の意味は変わりません。本文の言い換えや文の一部となる括弧書きは本文の流れに残します。

使用例と意味的な範囲

<main>
  <h1>山の天気を調べる</h1>
  <article aria-labelledby="forecast-title">
    <h2 id="forecast-title">午後の予報</h2>
    <p>午後は風が強くなる予報です。</p>
    <aside aria-labelledby="wind-note-title">
      <h3 id="wind-note-title">風について</h3>
      <p>山頂付近では、平地より風が強く感じられます。</p>
    </aside>
  </article>
</main>

この例では、articleが一つの予報を表し、asideが予報本文を補う説明を表します。CSSの配置を追加しなくても、これらのHTML上の意味は成立します。aria-labelledbyは、画面に表示される見出しをasideのaccessible nameに結び付けます。

asideは表示・非表示、折りたたみ、左右配置、検索登録などを実行する機能ではありません。それらが必要な場合は別のHTML・CSS・JavaScript上の仕組みを実装します。

Contextによるrole mapping

HTMLの意味的な定義と、支援技術に公開されるroleは別の層です。HTML-AAM 1.0 Working Draft（2026-10-12）は、asideのsectioning scopeを次のように分けています。これはWorking Draftの内容であり、すべてのブラウザーやOSの観測結果を示すものではありません。

accessible nameの候補には、aria-labelledbyで参照した表示テキスト、空でないaria-label、空でないtitleなどがあります。実際のname計算はHTML-AAMとAccessible Name仕様に従います。sectioning scopeにある名前なしのasideをgenericにするmappingは、DOMの要素名が変わるという意味ではなく、Accessibility Tree上のroleに関する条件です。

WPTのroles-contextual.htmlは、名前なし・名前ありのaside、空のlabel、無効なaria-labelledby参照、titleを含む例を検査します。別のWPTは、名前空間にprefixを持つarticleの中でasideを検査します。対象ファイルと実行結果はImplementation Evidenceに固定版で記録します。

Accessible nameとlandmarkの使い方

complementaryは、主コンテンツを補う領域を示すlandmark roleです。WAI-ARIA APGは、補足領域が主コンテンツと同じ階層で読め、分けても意味が通じるものかを確認するよう説明します。Complementary landmarkは原則として他のlandmarkの内側に置かないこと、同じページに複数ある場合はそれぞれに異なるlabelを付けることも推奨しています。

HTML-AAMのmapping条件を満たすことと、ページ上でlandmarkを追加する設計が望ましいことは同じ判断ではありません。特に、aria-labelを追加する前に、そのasideをランドマークとして個別に移動できるようにする必要があるか確認します。名前のないasideが常に不足というわけではありません。

<aside aria-labelledby="weather-note-title">
  <h2 id="weather-note-title">予報の見方</h2>
  <p>降水確率は、指定された時間内に雨が降る可能性を表します。</p>
</aside>

見出しがaccessible nameとして使われるのは、aria-labelledbyの参照があるためです。見出しを置くだけで常にlandmark nameになるわけではありません。landmarkが一つだけのページと複数あるページで、labelの必要性も異なります。

Fact / Evidence

Evidence sources

1. HTML Living Standard: The aside element — categories, context, content model, definition, examples, and authoring note.
2. HTML Accessibility API Mappings 1.0 Working Draft, 12 October 2026: aside — context-sensitive role mapping.
3. WAI-ARIA Authoring Practices Guide: Landmark Regions — complementary landmark purpose, hierarchy, and labels.
4. WAI-ARIA 1.2: complementary role — role definition.
5. WPT html-aam/roles-contextual.html at the tested revision — contextual and named role cases.
6. WPT html-aam/aside-in-prefixed-article.html at the tested revision — aside in an article whose HTML element has a namespace prefix.

Implementation Evidence

2026-11-04にChromium 156で日英4ページとasideのDOM fixtureを観測しました。固定したWPTの2ファイルは合計34/39項目がpassし、asideに関する20項目では19/20がpassしました。残るasideの1項目は、Sectioning content内でtitle=""を持つasideのroleです。WPTはgenericを期待しますが、ChromiumのAccessibility Treeは名前が空のcomplementaryを返しました。ほかに画像関連3項目とsectionの1項目が失敗しましたが、asideの結果とは分けて記録しています。role取得にはPlaywright / Chrome DevTools Protocol adapterを使いました。公式wptrunner / WebDriver実行ではありません。

Coverage / Open Issues

• 仕様確認済み定義、categories、context、content model、sectioning elementsとの境界、HTML-AAM WD mapping、Complementary landmark guidance
• 実測した範囲4つの日英ページ、5つの画面幅、system/light/darkの4状態、Chromium Accessibility Tree、固定WPT 2ファイル（aside項目19/20 pass）
• 未解決の差sectioning scope内でtitle=""のaside: WPTはgenericを期待するが、Chrome 156のAX Treeは空名のcomplementaryを返す
• 未完了Firefox・Safari、Windows UI Automation / IAccessible2、macOS AX / ATK、読み上げと点字、WPT全体、HTML-AAMの全条件

この記録は一つのブラウザーと選定したWPTの結果に限られます。Accessibility TreeはプラットフォームAPIそのものではなく、支援技術の発話や利用者の理解も測定していません。部分観測を他ブラウザー・OSの適合性へ一般化しません。

Related topics

• Yugien: aside要素をやさしく確認
• English Atlas: The aside Element
• article: 独立した内容・入れ子
• section: 話題の区分・見出し
• figure: 図・コード例とキャプション