← All patterns · Disclosure widgets

Accordion

Set of collapsible panels with headers.

Pattern

An accordion is a vertical list of expandable sections. Each header toggles its associated panel between expanded and collapsed states. Multiple panels may be open simultaneously, or the accordion may enforce one-at-a-time.

Roles

  • heading
  • button
  • region

States and properties

aria-expanded
On each section's button.
aria-controls
On each button, pointing at its panel.
aria-labelledby
On each panel, pointing at its button.

Keyboard interaction

Enter or Space
Toggle the focused section.
Up / Down arrow
Move between section headers (if implemented).

WCAG criteria

  • 2.1.1 — Keyboard

Canonical reference

WAI-ARIA Authoring Practices Guide — Accordion

More