Enhance Accordion Accessibility & Searchability With <details><summary>
The Challenge: Hidden Content and In-Page Search Woes
In the world of web design, especially within content management systems like Concrete CMS, creating accessible and user-friendly interfaces is paramount. The Accordion block, a common feature for organizing content, often presents information in a way that users can expand and collapse. However, the current implementation in Concrete CMS, which relies on Bootstrap's collapse functionality, uses a specific HTML structure (<h2>, <button>, <div>). While functional, this approach creates a significant usability hurdle: content hidden within the accordion's body is completely invisible to the browser's built-in search function. Imagine a user on a lengthy page, searching for a specific keyword, only to find that crucial information is completely overlooked because it's tucked away inside a collapsed accordion. This isn't just an inconvenience; it's a detriment to discoverability and user experience, particularly on content-rich websites where users actively rely on in-page search to navigate and find information quickly. This limitation can lead to user frustration and a less effective website overall.
The Proposed Solution: Embracing Semantic HTML with <details> and <summary>
To address the discoverability issue and elevate the overall web standard of the Accordion block, a compelling solution lies in adopting semantic HTML5 elements: <details> and <summary>. This pairing offers a native, accessible, and search-engine-friendly way to implement collapsible content. The <summary> element acts as the visible heading or trigger for the accordion item, while the <details> element encompasses the content that is revealed when the summary is activated. The beauty of this approach is that, even when collapsed, the content within the <details> element is still part of the document's structure and, crucially, is indexed by the browser's in-page search. This means that users can find information regardless of whether the accordion is open or closed, dramatically improving content discoverability. Furthermore, <details> and <summary> come with built-in accessibility features, providing native ARIA roles and states that screen readers and other assistive technologies can interpret correctly, often requiring less custom JavaScript for basic functionality. This shift towards semantic HTML not only resolves the immediate searchability problem but also aligns the Accordion block with modern web development best practices, leading to more robust, accessible, and maintainable code. The example shows a basic implementation: <details open><summary>This is the headline</summary><div class="accordion-body"><p>This is the summary text</p></div></details>. This structure inherently supports toggling and semantic meaning without the need for extensive JavaScript plugins, making it a powerful and elegant solution for improving the Accordion block.
Navigating Backward Compatibility: Preserving Functionality and Design
While the benefits of switching to <details> and <summary> are clear, we must also meticulously consider backward compatibility. The current Accordion block in Concrete CMS offers a feature allowing users to select the heading level (H2, H3, etc.) for each accordion item. This setting is important for SEO and semantic structure, and a direct switch to <details> / <summary> would inherently break this functionality, as these elements do not directly correspond to heading levels. Furthermore, existing websites that utilize the Accordion block might have custom themes or CSS rules specifically targeting the old Bootstrap-based markup. A sudden change in the underlying HTML structure could lead to broken layouts, unintended visual styles, and a degraded user experience across these sites. To mitigate these risks, several strategies can be employed. One approach is to introduce a new, optional rendering mode for the Accordion block that utilizes <details> and <summary>, allowing users to opt-in to the new structure while maintaining the old one for existing content. Alternatively, a backward-compatible toggle could be implemented within the block's settings, enabling users to choose between the legacy Bootstrap rendering and the new semantic HTML. This provides flexibility and control. Another crucial aspect is how to handle the
