How Do I Work with Microcontent Accordions?

Purpose

Accordions help organize content into sections that can be expanded or collapsed. Users simply click on the title to show or hide the content. This works well where you want to present additional details without overwhelming visitors.

When to use

This Microcontent type can only be added to Basic pages. Accordions work well for long lists of content that authors would like to place in different parts of the site. 

The Nielsen Norman Group has the additional following advice about accordions:

An accordion menu is a list of headers stacked vertically. You can click on these headers to show or hide the content linked to them.

Keep in mind these usability issues when deciding whether or not to use an Accordion:

• Ensure headings are descriptive and clear so users know what’s inside
• Clicks can feel cumbersome.
• Accordions increase interaction cost - how much mental and physical effort it takes to interact with your website.
• If you can't see it, you don't know about it.
• Screen readers and keyboard navigation can be less effective if content is hidden behind accordions, potentially disadvantaging users with disabilities.

There are other advantages to applying accordions to long, content-rich pages:

• Collapsing the page minimizes scrolling.
• The headings form a mental model of the information available.
• Hiding (some of) the content can make the web page appear less daunting.
• Accordions can be a better alternative to within-page links. People expect clicking a link will load a new page.

When you're considering how long your webpage should be, keep these myths in mind:

• Users avoid long pages. They do scroll when content is relevant, well-organized, and easy to scan.
• Users ignore information at the bottom of the page. Eye tracking studies show they give 20% of their attention to content below the fold.
• People shy away from content-heavy pages. People can manage a lot of information if it's presented well.

Avoid using accordions if your audience needs most or all of the page content to find answers.

Accordions work best when you need just a few key pieces of content on one page. They are also great for very small spaces, such as on mobile devices.

Elements

• Title: Limited to 70 characters and can be hidden
• Description: Optional and can be up to 200 characters
• List items: Title limited to 120 characters and details unlimited with basic text formatting
• Total of 20 items max within a single accordion

First you will create an accordion, then place or embed the accordion on a Basic page.