用于 Accordion 的 HTML5 详细信息元素

Question

细节元素在语义上是否适合标记 Accordion ？

例子:

<div class="accordion">

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

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

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

</div>

我问这个问题是因为规范对其用法不是很清楚。它只是说明细节元素是一个披露小部件。我当然不想将该元素用于它不应该成为的东西。

编辑

这样的东西在语义上会更合适吗？

<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>

谢谢!

Answer 1

是的，<details><summary>元素完全适合您所描述的内容(并且是最具语义的选项):

来自 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]

这是来自 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.

完美的用法。例如，我的公司有一个包含许多联系选项的联系页面，因此我们可以像这样为其设置 Accordion :

<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>

关于样式的注意事项:不应为了解决特定于浏览器的样式问题而抛出良好的语义。 CSS Reset可能是有序的，但没有语义上的理由不将这些有用且适当的元素用于 accordion。

**请注意:Chrome 目前是唯一支持切换功能的浏览器，我认为该规范旨在用于这些元素。 Javascript fallback在这里会有用。

**编辑 3/2017 - 参见 http://caniuse.com/#feat=details用于支撑表。现在，除了 IE 和 Edge 之外，几乎所有的都支持此功能。