How to build an accessible Accordion in React

Each item is a native <details> and each trigger its <summary>, so the button role, the expanded state, and Enter/Space activation all come from the platform rather than from ARIA — and the open panel renders before any JavaScript runs. The trigger wraps a heading so heading navigation still reaches each section, and each panel is a role="region" labelled by its trigger

When to use a Accordion

• Progressively disclosing sections of related content the user reads top to bottom
• Reducing vertical scroll when most sections stay collapsed (FAQs, settings groups)
• Allowing multiple sections open at once (type="multiple")

When not to use it

• Switching between mutually exclusive, equally important views — use Tabs
• A single show/hide region — a plain disclosure is enough

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: <Accordion> with one item that is always open

Prefer: Render the content directly, or use a collapsible disclosure

A single permanently-open section adds chrome and indirection for no gain

Example

<Accordion type="single" defaultValue="a"><AccordionItem value="a"><AccordionTrigger>Section</AccordionTrigger><AccordionContent>…</AccordionContent></AccordionItem></Accordion>

See the full Accordion reference →