Skip to main content

Accordion / Disclosure Components

Must haves

Use either the ARIA accordion pattern or disclosure pattern

  1. The element that controls the expand/collapse functionality is a button
  2. The button uses the aria-expanded attribute to communicate its current state
  3. The button uses the aria-controls attribute to reference the container of the expanded content
  4. When the button also serves as a heading, it is wrapped in an appropriate heading element

Learn more about the accessible accordion pattern and disclosure pattern

Visual Example

More in Figma

Accordion / Disclosure Visual Example

Do and Don't

DoDon't

<h1>Frequently asked questions</h1>

<h2><button aria-expanded=”true” id=”q1” aria-controls=”r1”>How do I sign up?</button></h2>

<section id=”r1” aria-labelledby=”q1”>To sign up, go to the Registration link and complete the form.</section>

<h2><button aria-expanded=”true” id=”q2” aria-controls=”r2”>Who can I contact for help?</button></h2>

<section id=”r2” aria-labelledby=”q2”>Use our contact form if you need assistance.</section>

<a href=”#” class=”button”>How do I sign up</a>

<div class=”answer”>To sign up, go to the Registration link and complete the form.</div>

<a href=”#” class=”button”>Who can I contact for help?</div>

<div class=”answer”>Use our contact form if you need assistance.</div>

Here links are used when buttons are more appropriate, the questions are not wrapped in headings, and there is no programmatic association between the control and the related section since aria-controls is missing.

Last modified