Guidelines for Using Accordions on Websites

Estimated reading time
2 minutes
Person sitting at a table and typing on a laptop.

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.

A screenshot from the Town of The Blue Mountains' website that shows two accordions with one item open and one item closed
Example of an accordion from the Town of The Blue Mountains' website

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. 

Additional Resources