What's the problem with accordions or collapsables? Continue reading the other accordions below!
Sometimes these are called "chunklettes".
What's the problem with accordions or collapsables? Continue reading the other accordions below!
People are lazy. They treat their time and effort like currency. To open an accordion the user will have to spend a little bit of their time and effort clicking to see the contents of an accordion item. This is fine if the user finds good value for the click, however if it's just there to make the page appear shorter, it's actually making the experience worse as the user will have to spend their time and effort opening the accordions. It is much less work for the user to just scroll down a longer page than it is to hide the content behind an accordion.
Using accordions forces the user to interact with the page in order to discover content. If the idea is to be able to fit more information on the page, but still get it in front of the visitor's eyeballs, then accordions will make it harder for users to see your content. People can scan content a lot easier if there is no interaction required.
You also can't print (or print to PDF) pages with accordions without manually opening all the accordions or possibly doing some extra work to make sure all the items are expanded in a separate print stylesheet.
As with any interactive component, accordions need to have some good accessibility considerations. Depending on the implementation, you may need to notify the user when content gets opened or closed, indicate what bits are clickable and what they will do when clicked, make sure the click targets are large enough, and write the HTML semantically.
Most screen readers already allow the user to tab through the headings on a page, so adding accordions brings extra effort needed to open each item as they tab through the page. It's redundant to hide the content for screen readers.
Did you know that <details> and <summary> are actually web components? This can have some special considerations that might be unexpected, such as issues with inheritance.
If you can work through the accessibility and coding challenges above, there are a few ways accordions might be a good tool for the job.
FAQs might be a good time to use accordions. The use-case here is that visitors are looking for a quick answer to a common question, so being able to quickly scan the page for the little pice of content they are looking for will likely yield a return that was worth the value of clicking, and actually helps the visitor accomplish their objective faster and easier.
Sometimes we may have a page that is required to list a bunch of reports. Usually people visiting these pages are looking for a specific report, so being able to group these reports by year or topic might make it easier for the visitor to find what they are looking for.
Hopefully this information has been helpful for you to be able to make a more informed decision around accordions and points you in the right direction for data on how to best use accordions.