Awesome Accordions website

The Accordion

The accordion is a common design pattern that is used to organise large sections of content into areas that expand and collapse. They can be effective in making the user feel less overwhelmed, as they can choose what sections to read by opening them.

The primary reason to use an accordion is to compress a large amount of options into a limited space. If a page has too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user. The accordion gives the user access to all of the items in digestible chunks and without requiring scrolling, which can remove the user from the context or page position they may prefer.

While accordions sound as an ideal alternative for presenting complex content, they are not a one-size-fits-all solution. they can best be used the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks.

Here you can read about the requirements and usage of the accordion pattern

When to use an Accordion

Before you start using an accordion think about the advantages and disadvantages of this pattern.  The best place to start when deciding to use an accordion is to evaluate common and critical use cases for your audience. Understanding people’s scenarios will help you determine whether or not accordions are appropriate. Some of the most important considerations are listed below:

Here's a short checklist for you to decide if the accordion is the pattern to use:

  • The user only needs to view one panel at a time 
    The nature of an accordion pattern makes it difficult to compare content across the different panels (since most of the content is hidden)
  • The user is not expected to read all the content on the page
    If you need a user to read all of the content then don't use an accordion, just let them scroll past the text without having them to interact with panels. Useful for long pages with paragraphs and headers which might not be interesting for all users
  • The content is closely related to one another
    Do not group unrelated items in one accordion, they need to have a common theme / topic

 

Anatomy of an Accordion

  • The accordion component – A collection of panels contained within an outer pane (often a list)
  • Accordion header – The labeled area(s) of the accordion panel that are expandable and collapsible
  • Accordion panel – The area (container) that contains the content specific to each header

We are using a font-size of 16px and a padding of 24px in the panel.

General requirements

The following requirements are based on well established best practices that we found online and in addition to those best practices we added some requirements that we find important in terms of usability. These requirements are based on our own research and experience.

Accessibility

The accordion should work propely in screen readers.
While changing the state of an accordion are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. We need to provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies. Read more about this in the codex

The accordion should work by touch.
The accordion should be operated by touch – on smartphones, tablets or desktops/laptops with touch screens.
the panel should be large enough for using touch and users should be allowed to click anywhere in the header area to expand or collapse the panel.

The accordion should be accessible for people using a keyboard.

Keyboard accessibility is one of the most important aspects of web accessibility but is often neglected. Nowadays, Most web interfaces are designed with mouse cursors and touch interaction in mind but there are a lot of people depending on keyboard accessibility:

  • Users with motor disabilities who have difficulty using a mouse, using a touch device, or clicking on small things.
  • Blind or visually impaired users frequently prefer to navigate websites with specific Braille keyboards.
  • Amputees or those with congenital amputation (birth without a limb or limbs, specifically hands in this case) often use special hardware mimicking keyboard functionality.
  • Anyone who simply doesn’t have access to a functioning mouse or touchpad.

Read more about this in the codex

Usability

Expanding and Collapsing panels

By clicking a panel heading the panel opens. You should be able to open multiple panels at the time and we want the user to give full control of the interface that's why we our default option is that the expanding or collapsing should be handled manually. The animation for expanding/collapsing should be subtle and last no longer than 250ms.

We use plus/minus icons to communicate the state of the block. Expanded has a minus icon and the collapsed state has a + sign.

By default the first panel will be expanded to communicate the behaviour of this panel.

Adding long texts in a panel

You should always have an overview of the accordion panels even when one expanded panel has a lot of content. Therefor the best option is to make the user scroll long texts in the panel.

Making it work with Print screen commands

When the print command is given the collapsed panels should be opened so that the hidden text is also printed.

Toggle All buttons

For accordions with a lot of panels we created toggle buttons to expand / collapse all panels at the same time.

Behavior

We think it is never a good idea to show / hide content without the user intentionally doing it. So from that perspective we decided to keep the interactions intentionally by letting the user always expand/collapse the panels manually.

If you do decide to expand/collapse them automatically then we advice to only use this when all panels are visible in the page, otherwise there is a chance that the closing of the panel will happen outside of the viewport that may create confusion. So be careful with this and also keep mobile in mind with the scarcity of viewing space.

An accordion can have two states

Collapsed panel
The collapsed panel shows the header that should have enough information for people to understand what content they will find when they click it. Next to this header we see a + icon to indicate that this panel can be opened.

Expanded panel
The expanded panel shows the hidden content, the header will have an active state and the icon will be changed to a - to indicate the panel can be closed.