Accordion

Stoplight icon accordions are only used for safety ratings.

Accordions appear in a container with condensed spacing. This modifier is used for situations where spacing is at a premium and the number of accordion panels is limited. If there are more than three or four accordion panels in a set, consider using the default accordion modifier. For example, this accordion modifier is used on product detail pages for surfacing product information.

Accordions are used to show a lot of content in a small space. They can simplify a page’s layout and prevent cognitive overload. However, it should be taken into account that accordions also hide content, which may lead to the user overlooking it.

If the user is likely to read through all of a page’s content, don’t use accordions. Accordions should be used if the user doesn’t need to read through each section.

Accordions vs. tabs

Accordions and tabs structure information in similar ways. Here are guidelines for deciding which to use and when to consider another solution:

When to use an accordion:

• If there is too much related information to show within a limited space
• If the information is overwhelming when displayed all at once
• If the information can be grouped into logical categories
• If the user does not need to see all the information at once
• If the user is not likely to read all of the content

When to use tabs:

• If there is a small number of categories that are unlikely to change or expand
• If the content needs a larger area or the whole page
• If the categories should function more like progression of steps

When to consider something else:

• If there is enough space to show all the content
• If the content makes more sense when viewed at once
• If the user is likely to read all the content
• If the content cannot be logically grouped into tabs or accordions
• If the total content slows the page’s performance

Behavior

All accordion panels should be closed on page load. Accordions should stay open until the user chooses to close them.

Heading levels

Accordion headings will have a consistent size and style no matter the heading level. The accordion heading will be labeled at the correct level for users who rely on screen readers.

Because accordions hide content, accordion headings must be as clear as possible.

Key takeaways

• Caret icons are the safest icons to use to indicate the accordion’s expand / collapse behavior
• Use accordions when people only need some of the information on the page
• Accordions on small screens can be helpful, but long scrolling accordion content can be disorienting — Anatomy will consider adding persistent accordion headings to combat this possibility

Study links

Primary sources (Boston Scientific user research)

No sources

Secondary sources

• Nielson Norman Group — Accordion Icons: Which Signifiers Work Best?
• Nielson Norman Group — Accordions Are Not Always the Answer for Complex Content on Desktops
• Nielson Norman Group — Accordions on Mobile

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that the tabs are fully accessible.

• Make sure each accordion panel has a unique and descriptive heading— this is necessary for users relying on assistive technologies to navigate
• Make sure that the content within the accordion panel is also fully accessible

For more information, see WAI-ARIA Authoring Practices for accordions and Deque’s screen reader keyboard shortcuts and gestures documentation.