details要素はsummaryを見出しにして補足内容を開閉する

details要素は、利用者が必要なときに追加情報を開いて読めるようにするHTMLです。最初のsummary要素へ内容が分かる見出しを書き、その後へ開閉する補足内容を置きます。

最初から開いて見せる場合はopen属性を付けます。ただし、送信結果、error、料金条件など、読まなければ判断や操作を誤る情報を閉じたままにしないでください。開閉できることと、隠してよいことは別の判断です。

summaryを最初の子要素として置く

W3CのHTML5 Recommendationでは、details要素を追加情報またはcontrolを得るためのdisclosure widgetとして定めています。内容modelは、一つのsummary要素に続けてflow contentを置く形です。

次は、配送方法の補足を開閉する説明用の仮例です。

<details>
  <summary>配送方法と受取時間について</summary>
  <p>選べる配送方法と受取時間をここへ記載します。</p>
</details>

summaryには、「詳しくはこちら」だけでなく、開くと何が分かるかを書きます。補足が閉じている状態でも、利用者が読む必要を判断できるためです。

summaryの後には段落だけでなく、list、table、form controlなどのflow contentを置けます。ただし、開閉する範囲を大きくしすぎると、閉じた状態でページの全体像が分かりにくくなります。一つの主題へ一つのdetailsを使います。

open属性は値ではなく有無で決まる

openはboolean属性です。属性があれば、summaryと追加内容の両方を表示します。属性がなければ、通常はsummaryだけを表示します。

<details open>
  <summary>重要な変更点</summary>
  <p>最初から表示したい内容をここへ記載します。</p>
</details>

boolean属性は、文字列falseを書けばfalseになる仕組みではありません。open="false"でも属性自体が存在するため、開いた状態として扱われます。閉じる場合はopen属性を削除します。

初期状態を開くか閉じるかは、情報の優先度で決めます。補足として後から確認できればよい内容は閉じる候補です。購入条件、利用停止、送信errorなど、現在の判断に必要な内容は通常の本文として見せるか、最初から開いてください。

開閉機能だけを目的にJavaScriptを重ねない

基本的な開閉だけなら、detailsとsummaryがその役割を持ちます。独自のdivとclick処理で同じ見た目を作る前に、必要な機能がHTMLだけで表せるかを確認してください。

一方、複数項目から一つだけを開く、開閉前にserverへ問い合わせる、入力内容に応じて表示を変えるなどの要件は、単純なdetailsだけでは決まりません。必要な操作を整理してからJavaScriptを加えます。

対応対象のbrowserで、mouseだけでなくkeyboardから開閉できることを確認します。表示記号だけに頼らず、summaryの文面から内容を判断できるようにします。screen readerを含む支援技術を対象にする場合は、実際の組合せで読み上げと状態変化も試してください。

閉じてもHTMLから内容が消えるわけではない

detailsを閉じることは、閲覧権限を制限する方法ではありません。追加内容はHTMLに含まれるため、秘密情報、権限のある利用者だけへ見せるdata、未公開情報を隠す目的には使えません。

また、長い本文をすべて閉じればページが短く見えても、情報設計が整理されたことにはなりません。同じ説明が複数箇所にあるなら、先に重複を直します。補足へ移す内容と、判断前に必ず読ませる内容を分けてください。

制作を委託する場合は、開閉する範囲、summaryの文面、初期状態、対象browser、必須情報を一覧にします。実装を任せても、何を閉じてよいかを決める責任はsite側に残ります。

最初の一手は、現在「詳しくはこちら」と書かれた補足を一件選び、開く前に内容が分かるsummaryへ書き直すことです。その補足を読まなくても主要な判断と操作ができるかを確認してから、detailsへ入れてください。