要約

details要素を使用すると、すべてのユーザーがいつ追加情報を読むかを決定できます。

テクニック

• 追加情報を折りたたむにはdetails要素を使用します [[WCAG-1.3.1]]
• summary要素に意味のあるラベルを付けます [[WCAG-2.4.6]]

例

<figure id="fig-01">
   <figcaption>
      The hydrologic cycle.
   </figcaption>
   <img
      src="graphics/water-cycle.jpg"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"
      aria-details="desc"/>
   <details id="desc">
      <summary>Description</summary>
      <p>
         The diagram shows the processes of 
         evaporation, condensation,
         evapotranspiration, water storage
         in ice and snow, and precipitation.
         A large body of water …
      </p>
   </details>
</figure>

<table aria-details="summary">
   …
</table>

<details id="summary">
   <summary>Summary</summary>
   <p>
      Embedded within the result column are separate
      tables that break down each of the … 
   </p>
</details>

解説

details要素により、JavaScript に依存せずに情報を展開したり折りたたんだりすることができます。スクリプトがサポートされていないことが多いデジタル出版物での使用に最適であり、すべてのユーザーが情報を利用できるため、拡張説明を提供するためのアクセシブルな方法でもあります。

デフォルトでは、 details要素内のテキストは最初は折りたたまれています。 summary要素で提供されるラベルのみが表示されます。ユーザーがこのラベルを（たとえば、クリックまたはタップして）アクティブ化すると、要素が展開され、追加情報が表示されます。

details要素は、ユーザーが最も恩恵を受けそうな場所に配置する必要があります。たとえば、表の要約はその表の前に表示されると最も役立ちます。また、画像の説明は、説明している画像の前に表示できます。あいまいさをなくすために、 aria-details属性を使用して、details要素を関連するコンテンツ項目に紐付けることができます。情報を論理的な順序で配置できない場合、この属性は支援技術のユーザーが関連付けられているコンテンツに遭遇したときに、その要素の位置を特定できるようになります。

details要素を使用する場合は、意味のあるラベル（つまり、情報の目的を説明するラベル）を必ず提供してください。要素に拡張説明が含まれている場合は、ラベルを「説明」にします。「詳細」のような一般的なラベルは使用しないでください。このラベルを使用すると、探している情報かどうかを判断するために、ユーザーが要素を展開して情報の一部またはすべてを読む必要があるからです。

関連リンク

• KB —非表示コンテンツ
• KB —画像の説明
• MDN — <details>: 詳細折りたたみ要素
• HTML — details要素
• ARIA — aria-details（プロパティ）