Skip to content

Accordion #3391

@shanthambi

Description

@shanthambi

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions