details element to allow all users to decide when they want to read additional
- Use the
detailselement to collapse additional information [[WCAG-1.3.1]]
- Provide a meaningful label in the
details element provides a way to expand and collapse information without depending on
also an accessible method for providing extended descriptions because the information is available to all
Support for the
details element in EPUB reading systems is still inconsistent.
Due to the static way that reading systems paginate publications, expanding the
element can cause the content of a page to be pushed off screen (i.e., it will not reflow onto the
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.
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. The remove any ambiguity, the
aria-details attribute can be used to associate the
details element with the
relevant content item (see Example 2). If the information cannot be placed in
logical sequence, the attribute allows users of assistive technologies to locate the element when the
encounter the content its 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.