aside要素の使い方 — 本文を助ける補足をまとめる

asideは、ページの中心となる話の補足や、少し離れた関連情報をまとめる要素です。たとえば、料理の手順に添える「材料を選ぶときのヒント」や、記事に関連する背景説明を入れられます。

先に結論

まずは小さな例

<main>
  <h1>カレーの作り方</h1>
  <p>野菜を切り、鍋で火を通してからルーを加えます。</p>
  <aside aria-labelledby="spice-note-title">
    <h2 id="spice-note-title">スパイスの補足</h2>
    <p>香りを強くしたいときは、最初に少量のスパイスを温めます。</p>
  </aside>
</main>

スパイスの説明は、手順そのものではなく、手順を助ける情報です。aria-labelledbyは、見出しをこの補足の名前として結び付けています。読み上げソフトなどがページ内の場所を一覧できるとき、内容を見つけやすくする助けになります。

横にあるかどうかでは決まらない

asideの意味は、画面上の位置ではなく中身で決まります。CSSで下や本文の途中に表示しても、本文を助ける補足ならasideにできます。反対に、横の欄にあるだけで本文と関係のない内容なら、asideが適切とは限りません。

本文の言い換えや、文の一部として読む括弧書きは、本文の流れに残します。HTMLの仕様も、括弧書きだけをasideにする使い方は勧めていません。

sectionやfigureとの違い

要素	表すもの	判断の目安
aside	本文を補う、関連した情報のまとまり	本文の流れから分けても、補足として読める
section	ページ内の一つの話題のまとまり	見出しを付けて、本文の構成に加える話題がある
figure	図・画像・コード例など、それ自体でまとまる内容	説明する図やコード例に、必要ならキャプションを付ける
div	特別な意味を加えないまとまり	見た目やスクリプトのためにグループ化する

たとえば記事の途中にある大切な図にはfigureを使えます。その図から少し離れた補足説明のまとまりにはasideが合う場合があります。

読み上げソフトにはどう伝わる？

ブラウザーは、置かれた場所に応じてasideを「補足の場所」としてAccessibility Tree（支援技術へ渡すページの情報）に表示することがあります。たとえばarticleやsectionの中では、補足に名前があるかどうかでrole（役割）が変わる場合があります。

すべての補足に読み上げ用の名前が必要なわけではありません。補足がランドマークとして表示されるべきかを考え、必要な場合は見える見出しをaria-labelledbyで結び付けます。見出しがあるだけでは、いつも自動で名前になるとは限りません。

よくある思い違い

• 横に置いた欄なら、どんな内容でもasideにするわけではありません。
• asideを書くだけで、横に並ぶデザインや折りたたみ機能が自動でできるわけではありません。
• 本文の一部として読む短い補足は、無理に本文から分けません。
• 本文を補う情報か迷う場合は、要素を決める前に、その内容と本文の関係を確認します。

Atlasで詳しく確認する

どの場所に置いたときにどのroleが使われるか、名前の条件、ブラウザーとWPTで確認した範囲は、Yugien Atlasのaside要素ページで確認できます。関連するまとまりは、article要素、section要素、figure要素もご覧ください。