아코디언 HTML5 세부 요소

Question

아코디언을 마크 업하려면 세부 요소가 의미 상 적절합니까?

예 : 사양이 사용에 대한 명확하지 않기 때문에

<div class="accordion"> 

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

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

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

</div> 

나는이 질문을 부탁드립니다. details 요소는 공개 위젯입니다. 필자는 그 요소를 의도하지 않은 것으로 사용하고 싶지는 않습니다.

가 이 같은

겠습니까 뭔가가 더 의미 론적으로 적합 할

EDIT?

<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> 사용하지 마십시오, 또는 당신이 문제가 있습니다 : 아마 당신의 아코디언에 대한 동작을 원하는 아니에요

Insane Chrome issue...Chrome renders twisties?

.

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

Answer 2

예는, <details><summary> 요소 (가장 의미 옵션) 당신이 설명하고 전적으로 적합한

가

세부 요소는 공개를 나타냅니다 위젯 사용자는 누구입니까 addi 또는 통제 정보. [강조 광산]

그리고 이것으로부터 http://html5doctor.com/the-details-and-summary-elements/된다 :

본질적, 우리는 사용자가 개방 및 폐쇄를 전환 가능한 아코디언 형 위젯을 생성하는 데 사용할 수있다. 내부에서 우리는 원하는 모든 종류의 콘텐츠를 넣을 수 있습니다.

완벽한 사용법. 예를 들어, 내 회사는 많은 연락처 옵션 연락처 페이지가 그래서 우리 수 설정과 같이 그것을 위해 아코디언 :

<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 CSS Reset은 순서대로 진행될 수 있지만, 의미있는 이유로 아코디언에 유용하고 적절한 요소를 사용하지 않아도됩니다.

** 참고 사항 : Chrome은 현재 이러한 요소를 위해 고안된 토글 기능을 지원하는 유일한 브라우저입니다. 자바 스크립트 fallback이 유용 할 것입니다.

** 3/2017 수정 - 지원 테이블은 http://caniuse.com/#feat=details을 참조하십시오. 이 기능은 이제 IE와 Edge를 제외한 거의 모든 기능에서 지원됩니다.