要約

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

テクニック

例 1 — 画像の拡張説明を提供する
<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>
例 2 - 表の概要の追加
<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 に依存せずに情報を展開したり折りたたんだりすることができます。スクリプトがサポートされていないことが多いデジタル出版物での使用に最適であり、すべてのユーザーが情報を利用できるため、拡張説明を提供するためのアクセシブルな方法でもあります。

注記

EPUB リーディングシステムにおけるdetails要素のサポートはまだ一貫していません。

リーディングシステムが出版物を静的にページ付けする方法により、 details要素を展開すると、ページの内容が画面外に押し出される可能性があります(つまり、次のページにリフローされません)。

ユーザーは、コンテンツにアクセスするために、ページ区切りモードではなくスクロールモードで読む必要がある場合があります。

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

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

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

関連リンク