Native HTML Accordions Offer Lightweight, Accessible UI Without JavaScript

Staff Reporter

person working html on computer — Freepik

Developers often overlook the power of native browser capabilities when seeking solutions for interactive components, favoring heavy libraries instead. In a recent blog post, Mario Hernandez demonstrates how HTML's <details> and <summary> elements can be used to build lightweight, accessible accordion interfaces—no JavaScript required.

With browser support for <details> reaching Baseline Widely Available status in 2020, Hernandez argues it's time developers reconsider these semantic tools. The native disclosure widget behaves predictably, is fully keyboard-accessible, and responds to screen readers—making it accessible by default. He shares both simple and advanced markup patterns, showing how developers can retain flexibility while maintaining standards compliance.

One standout feature is the name attribute, which enables exclusive accordion behavior across grouped elements—something traditionally done with JavaScript. Hernandez also points out lesser-known capabilities, such as automatic expansion of matching text during in-page search, and how the open attribute enables easy state-based styling. This native-first approach dramatically reduces dependency overhead while enhancing performance and maintainability.

The post ends with a call to action for seasoned developers: revisit foundational web features. According to Hernandez, modern HTML and CSS now do far more than many assume, and often with greater efficiency than custom code or third-party tools.

Reference: Native Accordions. Let HTML do the heavy lifting by Mario Hernandez (6 January 2026)

HTML

Web Development

CSS

Accessibility

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.