Accordians image

Accordions are useful for putting extra detail into small areas so that users can choose if they want to read further. Accordions allow editors to pack a lot of information into a page, without it feeling too long or creating sub-pages.

But, it’s tempting to overuse accordions just to keep a page small, or neat. This can actually make it more difficult for our users to get to important content. Hiding important content in accordions means:

  • Users can’t skim a page for the information that’s important to them
  • Users need to understand what the title of the accordion means
  • Users need an extra click to see the information inside the accordion

Accordion do’s

  • Do consider using normal text instead. Use clear headings, bullet points, or numbered lists
  • Do include an introduction at the top of the page
  • Do use accordions for secondary information
  • Do use accordions for step-by-step guides
  • Do test accordion titles with people who aren’t familiar with the content inside of the accordions

Accordion don’ts

  • Don’t put all of the page’s content inside accordions
  • Don’t use accordions to just to make a page seem shorter
  • Don’t use an accordion to hide small pieces of text

Find out how to build Accordions in Site Manager

Read these articles about the usability of Accordions on Mobile, and find out why Accordions are Not Always the Answer for Complex Content on Desktops