How to build an accessible Accordion in React

Each trigger is a native <button> exposing aria-expanded and controlling its panel via aria-controls, so screen readers announce open/closed state and Enter/Space toggle from the platform

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 →