HTML5 Details and Summary Elements

The enhanced support for the HTML5 <details> and <summary> elements within browsers provide developers with an easier and often more accessible method of dynamically showing and hiding blocks of content. These elements have full keyboard support and are supported via the majority of assistive technologies.

What are the Details & Summary Elements?

The <details> and <summary> elements allow the dynamic showing and hiding of content. For example, as often used within a frequently asked questions section such as the example below.

What is Accessibility?

 Accessibility means that regardless of someone’s impairment make that permanent, temporary or situational, they can interact without barriers in society.

For this example, this would require that each question is wrapped/contained within a details/summary block, with the <summary> identifying the question and the <details> defining the answer or explanation.

Previously, to dynamically show and hide blocks of content developers would often have to use a <button> element and bind JavaScript that would show or hide an adjacent block of text via the modification of CSS properties. However, these often turned out to be inaccessible via the lack of proper keyboard support, or incorrect use of WAI-ARIA/HTML semantics.

The HTML5 specification addressed this issue with the <details> and <summary> elements, enabling developers to create an accessible dynamic show and hide content block without tinkering with JavaScript and WAI-ARIA.

Note: The Detail & Summary elements are currently supported by Chrome, Firefox, Opera and Safari, support is under considered for Edge, however, they aren’t supported in Internet Explorer 11.

Examples

Below are several examples/methods in which the <details> and <summary> elements can be utilised to achieve a variety of functions.

Details And Summary Elements

Functional Example
Summary Text

Summary subtree should be used as accessible name

Code Snippet
<details id="details">
         <summary>Summary Text</summary>
         <p>Summary subtree should be used as the accessible name.</p>
</details>

 

Details Element With Open Attribute

Functional Example
Summary Text

This should be expanded by default

Code Snippet
<details id="details" open>
         <summary>Summary Text</summary>
         <p>This should be expanded by default.</p>
</details>

 

Summary Element with ARIA-Label Attribute

Functional Example
Summary Text

Aria-label should be used as accessible name

Summary subtree should be used as accessible description

Code Snippet
<details id="details">
         <summary aria-labelledby="sum-labelledby">Summary text</summary>
         <p id="sum-labelledby">p referenced by aria-labelledby.</p>
         <p>Aria-labelledby should be used as the accessible name.</p>
</details>

 

Summary Element with ARIA-LabelledBy Attribute

Functional Example
Summary Text

p referenced by aria-labelledby

Aria-labelledby should be used as accessible name

Code Snippet
<details id="details">
       <summary aria-label="ARIA-Label Attribute">Summary Text</summary>
       <p>ARIA-Label should be used as accessible name.</p>
       <p>Summary subtree should be used as the accessible description.</p>
</details>

 

Empty Summary Element with Title Attribute

Functional Example

Title attribute should be used as accessible name

Code Snippet
<details id="details">
       <summary title="title text"></summary>
       <p>Title attribute should be used as the accessible name.</p>
</details>

 

 Useful Links

Browser Support of HTML5 Elementshttp://html5accessibility.com/

Support for Detail & Summary Elements within Edgehttps://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/

Leave a Reply

Your email address will not be published. Required fields are marked *