Use an accordion when readers need only one or two parts of a page. Keep content open when most people need to read it, compare it, or act on it. An accordion is a row you click to show more text. It can tidy a page, but a tidier page is not always an easier page.
The real choice is not long page or short page. It is what readers need to see before they can take the next step.
Start with the task, not the page length
Before you hide a block of text, ask what it helps someone do. Does it answer a key question? Explain a cost? Set out a deadline? Show who a service is for?
If that detail could change a person's choice, show at least the key point on the page. Do not make them guess which row holds the answer.
Hide extra detail, not the reason to take the next step.
When an accordion can help
An accordion can work well when each group has a clear label and people need different parts.
- A visitor needs travel details for just one campus.
- A member needs the rules for one type of booking.
- A parent wants one answer from a list of clear, distinct questions.
The shared point is that each reader can spot the part they need without opening every row.
Write labels that tell people what is inside. “Fees and payment dates” gives more help than “Useful details”. Our guide to clear website link text uses the same rule: name the destination or answer, not just the action.
When to keep the text open
Keep the core content in view if readers need it to make a choice. Good uses for open text include:
- Key costs: the price, what it covers, and major extra fees.
- Next steps: how to apply, book, or get help.
- Rules that matter: who can take part and when they must act.
- Choices to compare: the main differences between plans or services.
You can still put long terms or rare edge cases below these points. The aim is to separate the main answer from the extra detail.
If every row must be opened to make sense of the page, try headings and short sections first. Cut repeated text. Move a large, separate topic to its own page. An accordion should not be the fix for copy that lacks a clear order.
Try a simple before and after
Imagine a booking page with three closed rows: “Cost”, “Dates” and “How to book”. A reader must open all three just to work out what to do.
A better starting point is to show the fee, the next available dates, and the booking link in the main page text. Then use a closed row for details such as what to bring or how to change a booking.
This is a suggested design choice, not a measured result. Test it with the people who use your site. Ask them to find the cost and explain the next step. Watch where they look and which rows they open.
Make the controls work for more people
A row that opens with a mouse click is not enough. People may use a keyboard or a screen reader.
The W3C accordion pattern sets out how headings, buttons and open or closed states should work together. Use it as a build reference, then test the real page.
- Check that Tab reaches each control in a clear order.
- Check that Enter or Space opens and closes a row.
- Make the keyboard focus easy to see.
- Check that a screen reader can tell whether a row is open.
- Check that hidden links cannot take focus while the row is closed.
- Let readers keep more than one row open when they need to compare answers.
A plus or minus icon can support the label. It should not replace a clear label or a state that assistive tools can read.
Test the page, not just the moving part
Try the page on a phone. Use long labels and real copy, not short sample text. Check what happens when several rows are open. Make sure the page still has a clear path to the main action.
For a wider review, use our website UX and UI checklist to look beyond the accordion itself. A control can work as built and still make the reader's task harder.
The best choice may be no accordion at all. Clear headings, plain text and a sound page order often do the job.
Need help choosing what stays in view?
Bring one busy page and the main task it needs to support. IGNITE can help sort the core answer from the extra detail, then shape a page that is easier to use. Talk to us about your website.