-
Notifications
You must be signed in to change notification settings - Fork 445
Description
The HTML specification recently introduced a name attribute on the details element that provides exclusive disclosure behavior — meaning only one details element with the same name value can be open at a time. According to the MDN blog post “HTML Details Exclusive Accordions” (https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/
), this allows developers to create a native accordion pattern without scripting.
<details name="faq">
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details name="faq">
<summary>Question 2</summary>
<p>Answer 2</p>
</details>
<details name="faq">
<summary>Question 3</summary>
<p>Answer 3</p>
</details>This behavior enforces that opening one item automatically closes any other details in the same group (i.e., with the same name). The native UI thus replicates the essential behavior expected from an accordion widget — single-open functionality without JavaScript.
Question for Clarification / W3C Guidance
Given this new name attribute behavior:
Can details name="..." be considered a fully accessible accordion pattern per W3C standards and the WAI-ARIA Authoring Practices?
If not, what additional requirements or limitations (e.g., keyboard navigation, screen reader semantics, role mapping) remain for details name="..." to be considered a valid, accessible accordion implementation across all major browsers?
Specifically:
Does the HTML specification allow details name="..." to serve as a native accordion widget in the context of accessibility standards?
Are any accessibility requirements currently unmet by this pattern (e.g., arrow key navigation, focus management) that would prevent it from conforming to the WAI-ARIA accordion design pattern?
Are there any browser support expectations or warnings that should be documented (e.g., partial support in Firefox/Safari) when recommending this pattern as “accessible”?
Supporting Info
Native single-open behavior via name achieves the most critical visual/interaction behavior of an accordion.
Historic W3C guidance discouraged details for accordions due to lack of multi-item coordination and keyboard behavior.
The name attribute may change the accessibility landscape if deemed compliant.