Accordions (also known as collapsable content) are website content elements. They let users show or hide information by clicking. While they can be useful in a few cases, we do not recommend using them too often. Use accordions only for specific instances. For example, they are good for Frequently Asked Questions (FAQs). Using accordions too often can hide important information from users. So, limiting the accordion use can keep content accessible and visible as well as ensure a good user experience for all visitors.
Appropriate Use of Accordions
Accordions should be used sparingly when dealing with extensive content that could overwhelm users. They are suitable for non-essential, supplementary details that support the main content. For example, in FAQs, accordions can neatly present each question and answer without cluttering the page.
Advantages of Accordions
- Reduce the need for excessive scrolling
- Enable quick scanning of available information
- Organize content into digestible segments
Challenges with Accordions
- Users may overlook important content within an accordion
- The content in an accordion will appear in search results. But, users may have difficulty finding it on the page. They have to open the accordion to see it
- The "find" shortcut (Command/Control-F search on-page) does not pull up the information located in accordions unless you expand them
- Users may find it inconvenient to click multiple times to access information
- Screen readers and other web accessibility tools may not interact seamlessly with accordions
Recommendations
Consider alternative approaches to accordions to enhance scanability without hiding content:
- Add a Table of Contents on top of the page for lengthy pages
- Break up long content into multiple pages
- Refine the content to be more succinct
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.