summary要素の使い方

HTMLのsummary要素は、開いたり閉じたりできる説明の「見出し」を作ります。見出しを選ぶと、同じdetailsの中にある追加の内容が開いたり閉じたりします。

先に結論

最小例

<details>
  <summary>送料と返品について</summary>
  <p>送料は無料です。商品到着後、7日以内なら返品できます。</p>
</details>

閉じているときも見出しは表示されます。見出しを選ぶと、その下に書いた説明が見えるようになります。

開く前から内容が分かる言葉にする

見出しは、開いた先に何が書いてあるかを知らせます。「詳しく見る」を何度も並べるより、「送料と返品について」のように中身を書くと、必要な場所を選びやすくなります。

• 短く、内容が分かる言葉にする。
• 開いた先にしかない大切な注意や必須の手順は、閉じたままだと見落とされないか考える。
• 同じページで見出しの書き方をそろえる。

detailsの中で最初のsummaryとして使う

ふつうはdetailsの最初の子としてsummaryを書き、そのあとに開いて見せる内容を置きます。別の要素の中に入れたり、2つ目以降のsummaryにしたりすると、detailsの開閉に使う見出しにはなりません。

<details>
  <summary>支払い方法について</summary>
  <p>クレジットカードと銀行振込を使えます。</p>
</details>

キーボードでも使えることを確かめる

キーボードのTabキーで見出しに移動し、SpaceキーやEnterキーで開閉できるか、使うブラウザーで確かめます。標準の操作を保つため、まずはsummaryの見た目や動きを作り替えずに使いましょう。

よくある間違い

• summaryだけを書けば開閉できると思う。開閉する内容と状態を持つdetailsも必要です。
• 何が開くか分からない空の見出しや、「ここをクリック」だけの見出しを使う。見える文字が、支援技術を使う人にも伝わる名前になることがあります。
• タブやメニュー、常に見える大切な内容を開閉部品に置き換える。それぞれの目的に合ったHTMLを使います。

Atlasで仕様とEvidenceを確認する

summaryが開閉を担当する条件、ブラウザーでの動き、アクセシビリティ上の名前と役割は、Yugien Atlasのsummary Topicで確認できます。開閉状態やグループの仕様はAtlasのdetails Topicも参照してください。初心者向けの全体例はdetails要素の使い方で説明しています。