govau/design-system-components

Accordion wrap toggle button in a heading level

Open

#867 建立於 2019年8月7日

在 GitHub 查看
 (5 留言) (2 反應) (0 負責人)HTML (115 fork)batch import
accessibilitygood first issuemodule: accordion

倉庫指標

Star
 (741 star)
PR 合併指標
 (30 天內沒有已合併 PR)

描述

For consideration:

Headings (hx) should be used to wrap the accordion triggering button. This would align with the recommendations of the ARIA 1.1 Practices Guide. The heading level as the first element in the <section>s will also align to the recommendations for the <section> element in the HTML 5.1 W3C Recommendation.

Accordion (Sections With Show/Hide Functionality) https://www.w3.org/TR/wai-aria-practices-1.1/#accordion

The section element https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#the-section-element

<section class="au-accordion"> <h3> <button class="au-accordion__title js-au-accordion" aria-controls="accordion-default" aria-expanded="true" onclick="return AU.accordion.Toggle( this )"> Accordion title </button> </h3> <div class="au-accordion__body" id="accordion-default"> <div class="au-accordion__body-wrapper"> Here <a href="#url">is</a> some accordion content </div> </div> </section>

貢獻者指南