Sources take different approaches
GOV.UK advises against splitting a series of questions into accordions and against nesting accordions. W3C APG demonstrates a form accordion and discusses nested panels as implementation cases. These sources address different questions: an accessible implementation example does not establish that the design is useful. This guide follows GOV.UK’s design advice: use separate pages for a series of questions and do not nest accordions.
Preferred source: GOV.UK · Choosing accordions, details and visible content. Prefer GOV.UK for deciding whether hiding content helps the task, supported by user research. Keep essential information visible, use separate pages for a series of questions and do not nest accordions. Follow W3C APG for keyboard interaction and semantics when implementing a custom accordion; its examples are not a recommendation to use form or nested accordions.
Compare: W3C · Accordion pattern. How we choose sources.
Recommendation
Keep information everyone needs visible. Following GOV.UK, use an accordion only when user research shows that choosing which related sections to open helps users. Do not use accordions to split up a series of questions or put accordions inside accordions.
Problem
A page feels too long.
Use disclosure or accordions when
- Related reference sections serve different needs, and their headings help users choose what to open.
- One or two short, secondary explanations suit simple disclosure; a larger set of related sections may suit an accordion.
Avoid disclosure or accordions when
- Hiding instructions everyone needs or errors people must fix.
- Using an accordion to avoid editing repetitive content or improving headings.
- Splitting a series of questions into accordion panels; use separate pages instead.
- Putting accordions inside accordions, where content becomes harder to find.
Example
Subscription details
You can cancel at any time. Access ends after the current billing period; export your projects before then.
Which export formats are available?
Projects can be exported as JSON or CSV in this example.
Where can I find past receipts?
Receipts are listed under Billing in this example.
These panels use native HTML disclosure controls.
Implementation
- First test the content without an accordion: simplify it, use clear headings, add anchor links or split it across pages. Use an accordion only when research shows that hiding selected sections helps users. Write descriptive labels that make sense while collapsed.
- For simple disclosure, use native details with summary as its first child. Keep its built-in behavior; do not add role="button" or duplicate expanded state to summary.
- For a custom accordion, follow the APG pattern: put each button in an appropriately leveled heading, set aria-controls to its panel ID, and keep aria-expanded synchronized with visibility. Hide collapsed panels and their controls.
- Support Enter and Space to toggle. Keep focus on the trigger after toggling, and keep every header button and control in an expanded panel in the normal Tab sequence.
- Allow multiple panels to stay open when users need to compare them. A shared name on details enforces one open panel, so use it only when that restriction helps the task. Do not nest accordions.
- Panel region landmarks are optional. Use them selectively for substantial sections, with aria-labelledby pointing to the controlling button; avoid turning every small panel into a landmark.
Tradeoffs
Accordions shorten the visible page but increase interaction cost and hide content from scanning. A longer, well-structured page is often easier to read.
Verification
Can users predict which section they need, toggle it by keyboard, hear its expanded state, and reach its contents without being moved unexpectedly?