Skip to main content
UI Patterns

Accordion

Use <details>/<summary> or button + aria-expanded + aria-controls. Arrow keys optional. Content panel must be associated with its trigger.

In plain terms

Expandable sections that open and close — each header must be a real button that says whether it's currently open.

Why this matters

Collapsible sections that aren't built as real buttons leave keyboard users unable to open them, and screen-reader users unaware they collapse at all.

How to detect

Quick check

Tab to each accordion header: can you open and close it with Enter or Space? Does a screen reader announce 'expanded/collapsed'? Native <details>/<summary> handles this for free.