Summary

Use the details element to allow all users to decide when they want to read additional information.

Techniques

Examples

Example 1 — Providing an extended description for an image
<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>
Example 2 — Adding a table summary
<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>

Explanation

The details element provides a way to expand and collapse information without depending on JavaScript. It is ideal for use in digital publications where scripting is often not supported and is also an accessible method for providing extended descriptions because the information is available to all users.

Note

Support for the details element in EPUB reading systems is still inconsistent.

Due to the static way that reading systems paginate publications, expanding the details element can cause the content of a page to be pushed off screen (i.e., it will not reflow onto the next).

Users may be required to read in a scrolling mode rather than paginated one to access the content.

By default, the text inside the details element is initially collapsed. Only the label provided in the summary element is visible. When users activate this label (e.g., by clicking or tapping on it), the element expands to show the additional information.

The details element should be positioned where users are most likely to benefit from it. A table summary, for example, is most helpful to encounter before the table it summarizes. An image description, on the other hand, can proceed the image it describes. To remove any ambiguity, the aria-details attribute can be used to associate the details element with the relevant content item. If the information cannot be placed in logical sequence, the attribute allows users of assistive technologies to locate the element when they encounter the content it is associated with.

When using the details element, make sure to provide a meaningful label (i.e., that describes the purpose of the information). If the element contains an extended description, make the label "Description". Avoid using generic labels like "details" as it requires the user to expand the element and read some or all of the information to determine whether it is what they are looking for.

Related Links