Accordions With Button and aria-expanded
Build a disclosure that announces open and closed.
What an Accordion Does
An accordion is a stack of headings that expand and collapse to reveal content. Each section can open on its own, unlike tabs.
The Header Is a Button
Make every accordion header a real button. Buttons are focusable, work with Enter and Space, and announce themselves to screen readers for free.
<button>Shipping details</button>All lessons in this course
- The Tabs Pattern: tablist, tab, tabpanel
- Arrow-Key Navigation Between Tabs
- Accordions With Button and aria-expanded
- Disclosure vs Tabs: Pick the Right One