Accordion

An accessible accordion pattern that demonstrates expandable content sections, keyboard interaction, and state communication for screen readers.

Demo

Use Tab to reach each accordion trigger. Press Enter or Space to expand or collapse a panel. Observe how focus and state change as you interact.

What to Observe

• Each trigger is reachable and activatable by keyboard
• Expanded and collapsed state updates visually and programmatically
• The trigger and its associated panel remain connected
• Focus behavior stays predictable throughout interaction
• Collapsed content is not reachable via keyboard or assistive technology

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Trigger (Heading Button) — the interactive control inside a heading that expands or collapses the associated panel
2. Icon — a visual indicator showing the current expanded or collapsed state of the panel
3. Content Panel — the region that is revealed when the trigger is activated

Accessibility Behavior

• Each trigger is operable using standard keyboard controls
• The component communicates its expanded and collapsed state to assistive technologies
• Each trigger is clearly associated with the content it controls
• Collapsed content is completely hidden from all users, including those using assistive technologies
• Focus behavior remains predictable and logical throughout interaction

Common Mistakes

• Using non-interactive elements for interactive controls, making them unreachable by keyboard
• Failing to communicate state changes when panels expand or collapse
• Leaving collapsed content reachable or perceivable when it should be hidden
• Breaking the association between a trigger and the content it controls
• Placing triggers outside the page heading structure, disrupting navigation for screen reader users

Why This Matters

Accordion components are frequently implemented in ways that break keyboard and screen reader access. When triggers are not interactive controls, keyboard users cannot reach them. When state changes are not communicated, assistive technologies announce incorrect information. When collapsed content remains perceivable, users encounter content they cannot see. Getting this pattern right ensures all users can navigate and understand the interface equally.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code