When should accordions be used?
Accordions are suitable to use when there is a high volume of content on a page that may result in overwhelmed users. When the headings and accordion titles serve as an overview of the important content within the page, accordions can then help users focus on finding their content quicker. If users only need a few key pieces of content on a single page, hiding most of the content in accordions will allow users to focus on the few topics that matter. For example, think about a website's FAQ section. Users can scan the questions to find the one related to their problem, and can then expand it open to view the answer provided.
Accordion pros
There are many benefits when it comes to using accordions on your website. Some of the benefits of using accordions are:
- They minimize page scrolling for users
- They allow users to quickly scan the page and see what information is available
- They present information in a more manageable way so users don't get overwhelmed with large amounts of content
- They can provide a better alternative for within-page links so people always know where they are on the website
Accordion cons
It is important to be mindful of which content you add to an accordion. Remember, the heading of the accordion must be contextual and give users enough information without being able to see the body content at first glance. Some cons to this feature are:
- The content hidden within an accordion body will appear in search engine results; however, when users then go to the page they may experience some difficulty finding the information (they have to open the accordion to see it)
- The "find" shortcut doesn't pull up the information located in accordions unless they have been expanded
- Clicking on headings can be cumbersome for those that are interested in most of the page's content, and it will increase the interaction cost (users treat clicks like currency and will often resent clicking if it doesn't bring them to the results they want)
- It's not as easy for web accessibility tools like screen readers to read accordions as it is for them to read the main body text
Best Practices
To gain the benefits of accordions while also considering the issues they can present for website users, we recommend following these best practices:
- Always keep the most important information out of accordions
- Avoid accordions when your users likely need most or all of the content on the page to answer their questions (it is better to show all page content at once rather than requiring users to open every accordion)
- Use accordions to condense details that are described under a heading and are not relevant for all page users
If you would like to learn more about digital content best practices get in touch with our team today or view the list of content-related articles listed below.