How to create interactive and accessible content with the details element

Finally Monday! Today we are kick starting a new series of tutorials on rarely used HTML tags

The <details> element is a powerful HTML5 feature that allows developers to create interactive disclosure widgets. This tag is used to show or hide additional content, making it useful for creating things like FAQs, dropdowns, or other sections where the user can choose to reveal hidden information.

Semantic meaning and Use Cases

What it represents

The <details> element semantically represents a disclosure widget, which is a section of content that the user can either reveal or hide. It works in tandem with the <summary> element, which acts as a summary or label for the hidden content.

Use cases

• FAQs: When you want to provide users with answers that they can choose to reveal.
• Interactive content: For sections of a page that contain optional or additional details, such as technical specs or descriptions.
• Dropdown menus: Where users might need to select an option or reveal additional settings.

Examples of proper usage

As it comes

<details>
  <summary>Click to reveal more information</summary>
  Here is some hidden content that is revealed when the user clicks the summary.
</details>

With Tailwind CSS

<details class="p-4 border border-neutral-300 rounded-md">
  <summary class="font-semibold cursor-pointer">Click to reveal more information</summary>
  <div class="mt-2 text-neutral-700">
    Content with basic Tailwind styling.
  </div>
</details>

Advanced styling techniques

When styling the <details> element with Tailwind, consider targeting the <summary> to customize its appearance when it is in the open state. Tailwind’s group classes can be handy here.

<details class="group p-4 border border-neutral-300 rounded-md">
  <summary class="font-semibold cursor-pointer group-open:text-blue-500">
    Click to reveal more information
  </summary>
  <div class="mt-2 text-neutral-700 group-open:bg-neutral-100">
    Content with advanced Tailwind styling that changes when the details are open.
  </div>
</details>

Accessibility considerations

• Keyboard navigation: The <details> element is natively keyboard accessible. Users can toggle the content with the space or enter key when the <summary> is focused.
• ARIA roles: Generally, ARIA roles are not necessary as the element is natively accessible. However, you can use ARIA attributes if customizing the behavior or adding additional interactive elements.
• ARIA example:

<details aria-expanded="false">
  <summary role="button" aria-controls="details-content">Click to reveal more information</summary>
  <div id="details-content">
    Accessible content with ARIA attributes.
  </div>
</details>

Browser support and fallbacks

The <details> element is supported by all modern browsers, including Chrome, Firefox, Edge, and Safari. Older versions of Internet Explorer do not support it.

Fallback strategies

For browsers that do not support the <details> element, a JavaScript polyfill can be used to simulate the behavior.

<details>
  <summary>Click to reveal more information</summary>
  <div class="fallback-styling">
    Fallback content for unsupported browsers.
  </div>
</details>

if (!('open' in document.createElement('details'))) {
    document.querySelectorAll('details').forEach(detail => {
        detail.querySelector('summary').addEventListener('click', function() {
            detail.open = !detail.open;
            detail.querySelector('.fallback-styling').style.display = detail.open ? 'block' : 'none';
        });
    });
}

Real-world examples and best practices

<details class="p-4 border border-neutral-300 rounded-md" id="example-details">
  <summary class="font-semibold cursor-pointer">Product Specifications</summary>
  <ul class="mt-2 list-disc pl-5 text-neutral-700">
    <li>Processor: Quad-core 2.5GHz</li>
    <li>RAM: 16GB</li>
    <li>Storage: 512GB SSD</li>
  </ul>
</details>

Best practices

• Avoid overusing: Use the
  element sparingly to avoid overwhelming users with too much hidden content.
• Clear summaries: Ensure that the
  provides a clear and concise description of the hidden content.
• Graceful degradation: Implement fallbacks or polyfills to ensure functionality in older browsers.

Conclusion

The <details>element is a versatile and accessible way to create interactive content on the web. By using it effectively, you can enhance user experience by providing optional information that is easily accessible without cluttering the page.

Hope you enjoyed this tutorial and have a good day!

/Michael Andreuzza