Start with the visitor’s task, not the page length
An accordion is a group of sections that visitors can expand and collapse. It can help when a page contains several self-contained answers and most people need only one or two of them. For example, a community organization might use expandable sections for separate questions about eligibility, opening hours and what to bring to an appointment. Visitors can scan the questions, then open the answers that matter to them.
A long page is not, by itself, a reason to use accordions. If visitors need to read information in order, hiding each step adds work. Keep essential instructions, deadlines, costs and warnings visible when missing them could change what someone does. An accordion is also a poor fit if its labels are so vague that visitors must open every section to find an answer. Before choosing one, write down the main task the page supports and ask whether collapsing content makes that task easier.
Write labels that reveal what is inside
Treat each accordion label as a signpost. “What documents should I bring?” tells a visitor more than “Documents.” “How do I change my booking?” is clearer than “Changes.” Use wording that matches the questions visitors are likely to have, and make each answer directly address its label. If the answer covers several unrelated topics, split it up or consider a regular page section instead.
Keep related sections together and arrange them in a useful order. For a service page, that might mean moving from who can use the service, to how to prepare, to what happens afterward. Avoid nesting accordions inside accordions: it becomes harder to see what is available and to remember which sections are open. If an answer is important enough to be linked to or shared on its own, consider giving it a dedicated page rather than relying on a hidden panel.
Make opening and closing predictable
Each label should act as a real button, not just text that responds to a mouse click. Visitors should be able to reach it with a keyboard, see a clear focus indicator, and activate it with the usual button keys. Its expanded or collapsed state should be available to assistive technology. The answer should be associated with the button that controls it. These details are easier to get right when using a well-tested component rather than assembling one from decorative elements.
Show that the section can be opened without relying only on an icon. A familiar indicator, such as a chevron, can reinforce the button label, but it should not be the sole clue. Keep the clickable area generous enough to use comfortably on a small screen. When a visitor opens or closes a section, avoid unexpectedly moving them elsewhere on the page. If your design permits multiple sections to stay open, check that this does not create a confusingly long stretch of content.
Test the content as well as the control
Before publishing, try a realistic task: “Find out what to bring to your first visit.” Start near the top of the page and note whether the right label is easy to identify without opening every section. Repeat the task on a narrow screen and with a keyboard. Check that focus remains visible, that the panel opens and closes as expected, and that the answer can be read without horizontal scrolling.
Then review what happens when someone arrives through a link or uses the browser’s find function. Important information buried in a closed section may be harder to notice, depending on how the page is built and how a visitor reaches it. If a particular answer must be easy to share, make sure there is a dependable way to reach it directly, or place that information on its own page. Finally, read every answer while its neighbors are closed. It should still make sense without requiring the visitor to open another panel for context.
A useful final check is to remove the accordion behavior in your mind. Would the page still have clear labels, a sensible order and concise answers? If not, improve the content first. An accordion can organize good information, but it cannot make unclear information useful.
