Accordion
Accordions are a list of headings that are clicked on to reveal and then hide additional content.
The use of an accordion may benefit long pages by reducing the need for too much scrolling.
Best practice
When to use:
- Users only need a few specific pieces of content within a page.
- Information needs to be displayed in a small space.
- If visitors need to see most or all of the information on a page use well-formatted text instead.
- If there is not enough content to warrant hiding content avoid using accordions as they increase cognitive load and interaction cost because users have to make decisions about what headers to click on.
Accessibility
- Hover state should indicate a link (text underline) and show clear contrast between the collapsed (hidden) and expanded states (e.g. background colour). (WCAG 2.0 Level A - SC 1.4.1)
- Text colour must have adequate contrast from the background color.
- Users must be able to tab through the accordion, using the return key to expand and collapse each panel.
Alternative UI modules
- Text copy: if the user needs to see all the information on a page (not just the topic headings).
- Lists (ordered or unordered)
- Tabs
- Filters
