FAQ pages are often one of the most visited sections of a website, yet they’re frequently the most cluttered. A well-executed accordion design can transform a wall of text into a clean, scannable interface that helps users find answers fast. In this guide, we break down when accordions actually work, the mistakes we see most often, and how to structure collapsible content so it performs well for both users and search engines. This overview fills in the gaps.
What Is an Accordion in UI Design?
An accordion is a vertically stacked list of headers that expand or collapse to reveal associated content. Each row has three main parts: a heading, an icon (usually a chevron or plus/minus), and a content panel. Users click, tap, or use the keyboard to toggle between the collapsed and expanded states.
For FAQ pages specifically, accordions let you present many questions in a small vertical space without forcing users to scroll through answers they don’t care about.
When Accordions Work Best on FAQ Pages
Accordions aren’t always the right choice. They shine in specific scenarios:
- Independent questions where users only care about one or two answers.
- Short to medium answers (a few sentences to a short paragraph).
- Mobile-heavy audiences where vertical space is limited.
- Scannable topics where the question itself gives enough context.
Avoid accordions when users need to compare answers, when content is critical (like legal disclosures), or when the FAQ contains only 3 or 4 items. In those cases, plain expanded text usually wins.
Common Accordion Design Mistakes
After auditing hundreds of FAQ pages, these are the issues we see repeatedly:
1. Hiding Content That Should Be Visible
If 80% of users need the answer, don’t hide it. Accordions are for optional details, not primary content.
2. Ambiguous Icons
A single chevron pointing right can look decorative rather than interactive. Users may not realize the row is clickable.
3. No Visual Feedback on State Change
When a panel opens, the icon should rotate or switch. Without this, users lose track of what’s open.
4. Slow or Janky Animations
Animations longer than 300ms feel sluggish. Instant open with no transition feels harsh. Aim for the middle ground.
5. Poor Tap Targets
The entire header row should be clickable, not just the icon or the text. React Accordion component covers this in more depth.
How to Structure Collapsible Content for Scanability
The wording of your headers matters as much as the design itself. Follow these rules:
- Write questions the way users ask them. Use natural language, not marketing speak.
- Front-load keywords. Put the most important word at the start of the question.
- Keep headers under 70 characters so they don’t wrap on mobile.
- Group related questions under category subheadings if you have more than 10 items.
- Keep answers focused. One question, one answer. Link out for deep dives.
Icon Choices: Chevron, Plus/Minus, or Arrow?
Each icon type sends a different signal to users. Here’s a quick comparison:
| Icon | Signals | Best For |
|---|---|---|
| Chevron (⌄ / ⌃) | Expand/collapse | Modern, clean FAQs |
| Plus / Minus (+ / −) | Add / remove content | Support and help centers |
| Arrow (→ / ↓) | Navigation or direction | Not recommended for accordions |
Whatever you choose, place the icon on the right side of the row. That’s the convention users expect in 2026.
Animation Timing That Feels Right
Animation is where accordions either feel polished or cheap. Our recommended values:
- Duration: 200ms to 300ms
- Easing: ease-out or cubic-bezier(0.4, 0, 0.2, 1)
- Icon rotation: synced with panel expansion, same duration
- Respect reduced motion: use
prefers-reduced-motionto disable transitions for users who need it
The classic CSS pattern uses max-height with overflow: hidden, but for smoother results consider using the modern interpolate-size: allow-keywords property, which now has solid browser support and lets you animate to height: auto directly.
Accessibility: Don’t Skip This Part
An accordion that only works with a mouse is a broken accordion. Here’s the minimum baseline:
- Use a real
<button>element for the header, not a<div>. - Add
aria-expanded="true|false"to reflect state. - Add
aria-controlspointing to the panel’s ID. - The panel should have
role="region"and anaria-labelledbyattribute. - Support Enter and Space keys to toggle.
- Make focus states visible with a clear outline, not just a color change.
- If you offer “Expand all / Collapse all” controls, make sure they’re keyboard accessible too.
Keyboard users should be able to Tab through headers naturally. Avoid trapping focus inside a panel unless there’s a good reason.
SEO Considerations for Accordion FAQs
Google indexes content hidden inside accordions, but there’s a nuance: hidden content on mobile may be weighted slightly less than visible content in some cases. To stay safe:
- Render answers in the HTML on page load, not via JavaScript after user interaction.
- Use semantic markup and consider adding FAQPage schema for rich results.
- Don’t stuff keywords into headers. Write for humans first.
Quick Checklist Before You Ship
- Does each header clearly look interactive?
- Is the icon state synced with the panel state?
- Is the entire row clickable?
- Does it work with keyboard only?
- Does it respect reduced motion?
- Are ARIA attributes correct?
- Is content rendered server-side for SEO?
- Does it look good on a 360px wide screen?
FAQ
Should all FAQ items start collapsed?
Usually yes. If one specific question is asked by most visitors, consider opening it by default. Never open all of them at once, that defeats the purpose.
Can I use accordions for something other than FAQs?
Absolutely. Accordions work well for product specs, shipping details, terms and conditions, and long forms broken into steps. Just apply the same rules: independent content, clear headers, accessible markup.
Do accordions hurt SEO?
Not if implemented correctly. As long as content is in the initial HTML and not loaded after a click, search engines can crawl it. Adding FAQPage schema can also help with rich snippets.
What’s better: one accordion open at a time, or multiple?
For FAQ pages, allow multiple open panels. Users often want to compare answers. For settings panels or wizards, single-open behavior may make more sense. A fuller account is out there.
How many FAQ items are too many?
Beyond 15 to 20 items, add categories or a search field. A long list of collapsed rows becomes its own kind of clutter.
Need help redesigning your FAQ or improving your site’s usability? Our team at webdesign-by-osz.com builds accessible, high-performing interfaces that convert. Get in touch to talk about your project.