Accordion usage

Accordions are a common UI pattern for grouping related content while keeping pages concise. They allow users to expand or collapse sections as needed, which works well for FAQs, filters, or secondary details.

But accordions can also harm usability if overused, poorly labeled, or inaccessible. Users may miss hidden content, struggle with navigation, or face accessibility barriers if states are not announced properly.

Guidelines for designing and implementing accordions.

Use accordions for secondary or optional content

Accordions are best for content that isn’t essential to complete the main task but provides useful context (for example: FAQ answers, advanced settings, additional details).

References:

• Accordions on desktop – Nielsen Norman Group
• Accordions on mobile – Nielsen Norman Group

Provide clear, descriptive headings

Each accordion header should describe the content inside. Avoid vague labels like “More” or “Info.”

References:

• WCAG 2.4.6: Headings and labels
• Content design – Sarah Richards

Make section headers fully clickable and align icons properly

The entire header area of an accordion section should be clickable, not just the text or the icon.

Icon placement:

• Position the expand/collapse icon close to the text label to emphasize connection.
• Alternatively, place the icon to the left of the text for stronger association.
• Avoid placing the icon too far away from the label, it may look disconnected.

References:

• Accordion – GOV.UK Design System

Ensure accessibility with ARIA attributes

Use aria-expanded, aria-controls, and role="button" on headers. Announce expanded/collapsed states to assistive technologies.

References:

• ARIA Authoring Practices – W3C
• Inclusive Components – Heydon Pickering

Allow only one or multiple sections depending on context

For FAQs, allow multiple panels open at once. For step-by-step flows, restrict to one open panel to reduce clutter.

References:

• Designing interfaces – Jenifer Tidwell

Provide “Expand all / Collapse all” option

When multiple accordion sections are present, include a global control to expand or collapse all sections at once. It saves time in content-heavy pages and reduces repetitive actions for keyboard and screen reader users.

Implementation details:

• Place the control above the accordion group.
• Use clear labels: “Expand all / Collapse all”.
• The control should dynamically switch its state (if all are open → show “Collapse all”).
• Must be fully accessible (keyboard + screen readers).

References:

• Accordion – Dell Design System
• Accordion – GOV.UK Design System

Maintain visible focus states

Accordion headers must be keyboard navigable with clear focus indicators.

References:

• WCAG 2.4.7: Focus visible
• Keyboard accessibility – WebAIM

Use smooth but fast animations

Animations help users notice changes but should be subtle. Support prefers-reduced-motion.

References:

• WCAG 2.3.3: Animation from interactions

Frequent mistakes when using accordions.

Hiding critical information in accordions

Users may miss important details if they remain collapsed by default.

Using vague or repetitive labels

Headers like “Section 1” or multiple “More” buttons force users to open each one to understand content.

Not supporting keyboard navigation

If users can’t expand/collapse with keyboard, accordions become inaccessible.

Overusing accordions for all content

Collapsing too much content forces unnecessary clicking and hurts discoverability.

Key takeaways for accordions.

• Accordions are best for secondary or optional content, not critical tasks.
• Always use clear, descriptive labels for headers.
• Support accessibility with ARIA attributes, keyboard navigation, and visible focus states.
• Allow one or multiple open sections depending on context.
• Avoid hiding key information or overusing accordions unnecessarily.

Well-designed accordions reduce clutter and improve scanability. Poorly designed, they hide information and block accessibility.

Scenario 1: FAQ section

Use when presenting a list of questions with collapsible answers on help pages, landing pages, or support centers where users scan for specific questions.

You are a UX-focused design agent. Design an accessible accordion FAQ section for [context: product landing page / help center / checkout support].

Rules:
- Structure: button inside a heading (h2 or h3) + collapsible panel
  Each item: heading with button that has aria-expanded and aria-controls
  Panel: div with role="region" and hidden attribute when collapsed

- Labels: self-explanatory without expanding, sentence case, under 10 words
  Good: "How do I cancel my subscription?"
  Bad: "More information" or "Details"

- Default state: all panels collapsed unless one is contextually relevant
- Allow multiple panels open simultaneously

- Visual indicator: chevron or +/- icon that changes on expand

- Animation: max 300ms CSS transition, respect prefers-reduced-motion

- Keyboard: Tab moves between headers, Space or Enter toggles

Accessibility:
- aria-expanded="true/false" on each button
- Heading level must fit the page outline — use h3 if the page uses h2 for sections
- Collapsed panel: use hidden attribute or display:none — not aria-hidden

Constraints:
- Never hide critical information inside an accordion
- Never use div or span as accordion headers — use button inside a heading
- Never skip aria-expanded on the trigger

Scenario 2: Settings panel

Use when organizing settings or configuration options into collapsible sections within a settings page or sidebar.

You are a UX-focused design agent. Design an accordion settings panel for [context: notification preferences / display settings / filter options].

Rules:
- Group related settings into logical sections: 3–7 items per section
- Labels: descriptive category names — "Notifications", "Privacy", "Appearance"
  ✗ "Settings 1" ✗ "Options B"
- Default: open the section most relevant to the user's current context
- Preserve open/closed state across page refreshes (localStorage or user preference)
- Multiple sections can be open simultaneously — do not force single-open
- If a section has an error: indicate in the header
  aria-label="Notifications — contains 1 error"
- Auto-save: show brief "Saved ✓" confirmation after each change
  Keep the section open after saving — preserve user context

Accessibility:
- All form controls within panels: visible labels, keyboard operable
- Focus stays on the header button when a panel opens — does not jump inside

Constraints:
- Never use accordion for settings where users need to compare sections simultaneously
- Never auto-close sections when another opens
- Never omit labels from form controls inside accordion panels