HTML5 details element for accordion

Question

Is the details element semantically appropriate to markup an accordion?

Example:

<div class="accordion">

<details open>
<summary>Section 1</summary>
</details>

<details>
<summary>Section 2</summary>
</details>

<details>
<summary>Section 3</summary>
</details>

</div>

I ask this question because the spec isn't very clear about its usage. It just states the details element is a disclosure widget. I certainly don't want to use the element for something that it's not meant to be.

EDIT

Would something like this be better suited semantically?

<article role="tablist">

<header role="tab" aria-expanded>Section 1</header>
<div role="tabpanel">
</div>

<header role="tab">Section 2</header>
<div role="tabpanel">
</div>

<header role="tab">Section 3</header>
<div role="tabpanel">
</div>

</article>

Thanks!

Answer 1

Yes, <details><summary> elements are entirely appropriate (and the most semantic option) for what you're describing:

From http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element:

The details element represents a disclosure widget from which the user can obtain additional information or controls. [emphasis mine]

And this is from http://html5doctor.com/the-details-and-summary-elements/:

Essentially, we can use to create an accordion-like widget that the user can toggle open and closed. Inside , we can put any sort of content we want.

Perfect usage. For example, my company has a contact page with many contact options so we could setup an accordion for it like so:

<details>
    <summary>Mailing Address</summary>
    <p><strong>U.S. Correspondence:</strong> 123 Main St., Washington, DC 00000-0000</p>
    <p><strong>International Correspondence:</strong> P.O.Box 1111, Washington, DC 00000-1111</p>
</details>
<details>
    <summary>Phone Numbers</summary>
    <p><strong>U.S.:</strong> 800-555-5555</p>
    <p><strong>Int'l:</strong> +1-800-555-5556</p>
</details>

A note on styling: good semantics shouldn't be thrown overboard to address browser-specific styling issues. A CSS Reset may be in order, but there's no semantic reason not to use these helpful and appropriate elements for an accordion.

**Do note: Chrome currently is the only browser that supports the toggling functionality that I believe the spec intended for these elements. A Javascript fallback would be useful here.

**Edit 3/2017 - See http://caniuse.com/#feat=details for support tables. This feature is now supported by almost all but IE and Edge.

Answer 2

Don't use <details> for this, or you'll have this problem:

Insane Chrome issue...Chrome renders twisties?

That's probably not desired behaviour for your accordion.

Answer 3

Nice question. I was searching for that and saw even MDN is using <details> for their sidebar menu of links. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

However, there are two problems:

<details> isn't animateable

Since it's either open or not, there's no way to animate the transition - because there's no transition.

From MDN docs:

Unfortunately, at this time there's no built-in way to animate the transition between open and closed.

No support for IE

If you care, it is not supported by Internet explorer :)