A page is looking long, and an accordion is tempting. Tuck each section behind a heading, the thinking goes, and the page feels shorter and tidier. But a shorter-looking page is not automatically an easier one, and hiding the wrong thing can make a visitor’s decision harder.
This guide helps you decide what can safely sit behind a heading and what needs to stay visible, for FAQs and ordinary content sections rather than navigation menus. For menus and their back-and-close behavior, see the mobile menu guide. In Online Website Previewer you can open the live page and work the accordion—opening and closing its sections—across phone, tablet, and desktop.
Keep What Everyone Needs Visible
Start with the decision this page supports, and list the facts a visitor needs before they can judge the offer or continue. Keep those answers visible. GOV.UK puts it plainly: do not use an accordion for content that all users need to see.
“Optional” here means unnecessary for this particular decision, not unimportant to everyone. If material costs or required equipment decide whether someone can sign up for a class, that is decision-critical and belongs in the visible explanation, so check your audience and task assumptions with the team rather than hiding something just to shorten the page.
Try Headings Before Hiding
Before reaching for a reveal, see whether concise sections with clear headings already solve the problem. An accordion adds a step, and a closed section can go unnoticed, so it is not free.
Ask whether the same content would work as ordinary sections, and hide only the part you can defend hiding. Do not use an accordion to tidy away weak writing or to break a step-by-step sequence into panels.
Write Headings That Say What Opens
Because people have to choose what to open without seeing inside, the closed heading has to carry its weight. A specific label like “Where can I buy extra materials after the class?” tells someone far more than “More information.”
The same applies to FAQs, which are a content format, not a reason to use an accordion by itself. Write genuine, task-related questions, and avoid parking an essential answer only inside a catch-all FAQ where someone has to go hunting for it.
Choose the Opening Behavior From the Task
Decide which sections, if any, start open, whether more than one can be open at once, and whether a “Show all” control helps. Base that on what the visitor needs to compare. If they must weigh two sections side by side, forcing one open at a time works against them.
There is no single correct policy. GOV.UK usually starts sections collapsed but allows some to be open from the start, and the W3C’s accordion pattern describes both single-open and multi-open versions. If nearly everything needs to be open anyway, plain sections may simply be clearer.
Check Opening and Returning
Look at the reveal in action, not just the closed screenshot. In an agreed test copy, open a long section and ask whether you can find its heading, reach its links, and carry on reading afterward.
On a desktop keyboard, Tab and Shift+Tab move between the controls and links, and Enter or Space opens a section—and closes it where that implementation allows. Make sure you can always see where keyboard focus is, and that expanding or collapsing never strands you or hides something you need.
The current W3C pattern lists only those keys, so a missing arrow, Home, or End key is not a defect to report, and an accordion that keeps one section always open is a valid variant.
Hand the Rest to a Developer
A preview lets you judge the content decision and the basic interaction, but some things need the people who built it. The W3C pattern describes a heading that contains a button revealing its section, and its open or closed state has to be announced, not shown only as an unexplained plus symbol.
Ask the developer or an accessibility reviewer to confirm the heading structure, the accessible name, the expanded state, and that focus stays visible against WCAG’s focus requirement. Behavior like browser Find, printing, and whether sections stay open varies by implementation, so do not assume hidden answers are always searchable or always hidden—that is a question for the team, not the marketer writing ARIA.
Point to the Problem, Not the Fix
You can give useful feedback without specifying the solution. Name the page, say which facts are hidden that the decision needs, and ask whether the headings predict what opens.
For an interaction problem, name the accordion heading, add the phone, tablet, or desktop view when it matters, and describe what you did, what happened, and what you expected.
For example: on the class page, the subject, dates, and total cost are all tucked under a single “Details” heading while the booking button stays visible, so a visitor can act before they can judge the class—please show those facts beside the explanation and keep only follow-up questions in the accordion.
