Élément de détails HTML5 pour l'accordéon

Question

L'élément de détails est-il sémantiquement approprié pour baliser un accordéon?

Exemple:

<div class="accordion"> 

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

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

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

</div> 

Je pose cette question parce que la spécification est pas très clair quant à son utilisation. Il indique simplement que l'élément details est un widget de divulgation. Je ne veux certainement pas utiliser l'élément pour quelque chose que ce n'est pas censé être.

EDIT

Would quelque chose comme ça être mieux sémantiquement?

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

Merci!

Answer 1

Ne pas utiliser <details> pour cela, ou vous aurez ce problème:

Insane Chrome issue...Chrome renders twisties?

C'est le comportement probablement pas souhaité pour votre accordéon.

Answer 2

Oui, <details><summary> éléments sont tout à fait approprié (et l'option la plus sémantique) pour ce que vous décrivez:

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

L'élément détails représente une divulgation widget à partir de laquelle l'utilisateur peut obtenir addi informations techniques ou des contrôles. [Souligné]

Et c'est de http://html5doctor.com/the-details-and-summary-elements/:

Essentiellement, nous pouvons utiliser pour créer un widget accordéon que l'utilisateur peut basculer ouvert et fermé. A l'intérieur, nous pouvons mettre n'importe quel type de contenu que nous voulons.

Utilisation parfaite. Par exemple, ma société a une page de contact avec de nombreuses options de contact pour que nous puissions installer un accordéon comme si:

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

Une note sur le style: bonne sémantique ne doivent pas être jetés par-dessus bord pour traiter un style spécifique au navigateur problèmes. Un CSS Reset peut être dans l'ordre, mais il n'y a aucune raison sémantique de ne pas utiliser ces éléments utiles et appropriés pour un accordéon.

** A noter: Chrome est actuellement le seul navigateur prenant en charge la fonctionnalité de basculement que je crois conforme aux spécifications de ces éléments. Un Javascript fallback serait utile ici.

** Édition 3/2017 - Voir http://caniuse.com/#feat=details pour les tables de support. Cette fonctionnalité est maintenant prise en charge par presque tous sauf IE et Edge.