Company
ServiceNSW
Year
2021, 24
Type
Component,
Design System
Accordions
Accordions enable users to show or hide information on a page.
The accordion is one of the most frequently used components across SNSW, but it wasn't available as a component in the GEL. The product teams were using inconsistent versions of the accordion and were requesting guidance on how to implement it correctly.
Team
Srishti
AIM
To design a standardised accordion component for the design system that meets the needs of product teams and provides a consistent user experience across the product.
REQUIREMENT
1. Functionality: The accordion should allow for the expansion and collapse of content sections.
2. Ensure the accordion is accessible.
3. Provide clear guidance on the appropriate use of accordions, including when and where to use them for optimal user experience.
DISCOVERY
Internal research
Gathered and analysed information to gain insights and understanding about various designs of Accordion within the SNSW.
Team A

Inconsistency with GEL foundations
- heading styles
- colour
- font size

Multiple accordions design on one page

Critical links hidden with in accordions.
Team B

Tables within Accordion
Team C



Another design of the accordion includes critical details that are initially hidden within expandable sections. It also features a call to action for users to engage further.
Bordered design with a 16px margin for mobile layouts.
Team D

Another design of the accordion includes critical details that are initially hidden within expandable sections. It also features a call to action for users to edit & delete.
Also, include status labels.
Team E

Nested accordions
Icons on the heading
External research & best practices
Australian Design System

GitLab


Do not use an accordion when:
-
Displaying critical system information or a primary action to be taken on the page. (for example, alerts, confirmation or cancellation buttons).
-
Displaying navigation elements such as tabs.
-
Displaying links pointing to sections of the same page, instead use a list.
-
Creating hierarchy levels by nesting them within each other. If you need to add hierarchy to the content use a tree.
USPTO Design

-
Single-select: Only one panel can be expanded at a time; expanding a new panel collapses the previous one.
-
Multi-select: Multiple panels can be expanded simultaneously without affecting the state of other panels.
-
Expand/Collapse All: Allows all panels to be opened or closed at once. When all panels are fully open or closed, the corresponding button is disabled; if some panels are open and some are closed, both buttons are enabled.
USWDS

-
Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
-
Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)
DESIGN RECCOMENDATION
Recommendations based on research
-
Use accordions for simplifying information:
Accordions are ideal for presenting large amounts of information in a way that helps users prioritise and digest content in manageable stages. They allow users to hide irrelevant content, keeping their focus on what is most important to them. -
Avoid accordions for content that requires full visibility:
Accordions should not be used when users need to see most or all of the content on a page to answer their questions. While they reduce the need for scrolling, they increase the interaction cost by requiring users to decide which headings to expand. -
Consider printing and accessibility:
When designing with accordions, consider how content will appear in printed formats, as content hidden in collapsed sections may not print correctly.
Be cautious with complex content (such as forms or widgets) within accordions, as this can create accessibility issues and reduce users' awareness of all available content. -
Balancing interaction costs:
While accordions can make a page appear shorter and more organized, it is essential to balance this with the potential for increased interaction costs due to the need for users to make multiple decisions about which sections to open.
Reccomended Structure

Design Solution

-
The header is the interactive area to expand or collapse accordion.
-
The panel is the section of content that we want to show/hide.
-
The title is a short message that summarize the hidden content.
-
The icon indicates the state of the accordion whether it’s expanded or collapsed.
-
Expand all/Collapse all lets the user to expand or collapse all accordions with one click.
States

Guidelines
DO's
-
Use when users need to access only a specific subset of content within a page or section.
-
Utilize accordions to hide low-priority actions or content, reducing cognitive load and allowing users to focus on their primary task.
-
Effective for displaying and grouping additional information in a structured manner.
-
Implement to provide granular control over the visibility of information on a page.
-
Ideal for presenting simple and straightforward content.
DONT's
-
Avoid using accordions to display critical system information or primary actions (e.g., alerts, confirmation, or cancellation buttons).
-
Do not use accordions if users are likely to need most or all of the content on the page; instead, keep content always visible and use headings or cards to organize sections.
-
Refrain from using accordions when there is too little content, as hiding minimal content is unnecessary.
-
Avoid using accordions when there are links that point to or jump to specific sections of the same page.
-
Do not create multiple hierarchy levels by nesting accordions within each other.
-
Avoid using accordions on pages that are likely to be printed.
Feedback 1

Our accessibility expert recommended simplifying the language of Expand All & Collapse All to make it clear and understandable.
Feedback 2
The current guidance lacks sufficient context on balancing accessibility with keeping important information visible. Several teams are including dense and complicated content within accordion panels, which may hinder accessibility. It would be helpful to clarify the guidelines to better define the boundary between accessibility and content visibility.
Iterarting on feedback

Simplifying the language, even more, using 'open all' and 'close all'.
Instead of ‘expand all’ and ‘collapse all’.
Accessibility considerations
For accessibility, we’re giving consumers the ability to add a context that will be read out to screen reader users only.
So for sighted users they will see
-
close all
-
open all
But for screen reader users they will hear
-
close all [context]
-
open all [context]
Iterating on guidelines
Iterated on the guidelines to provide more structure and clarity.
About this component
Accordions are a vertically stacked set of interactive headings that contain a title and a content snippet.
They prevent you from overwhelming the user with information, that in most cases, they do not need to act upon.
Accordion headings
Function as controls that enable users to open or close sections of content.
Accordion titles
Give users a high-level overview of the content within each accordion panel. The title should use keywords so the user can decide what section is relevant to them.
Accordion panels
Include a section of content that’s associated with the accordion title. Accordion panels should have no more than a few paragraphs of content.
When to use Accordions
Use an accordion when you need to provide technical or detailed information that only some users need to know.
For example, use an accordion to display a list of FAQs that only some users might find helpful.
Before using an accordion, test how your content works without one.
Provided clearer structural guidelines on the type of content that should be included in each section of Accordions, such as appropriate use of headings, titles, and panel content.
Also, provided clear guidelines on when to use Accordions
Dos
-
Use to hide content that’s only relevant to some users. For example, technical information that only certain users would need to know.
-
Use short titles to describe content accurately.
-
Keep the number of accordions to 10 or less. If more accordions are needed, consider breaking up accordions and grouping them into subheadings. Also, consider adding a new page of content to reduce cognitive load.
-
Limit how often you use accordions.
-
Don’ts'
-
Use when information is relevant to all users. Instead, use headings, lists and formatting to break up dense text.
-
Use to hide content to reduce scroll. Instead, use separate pages or navigational tabs.
-
Use to display critical system information such as alerts or actions a user needs to take.
-
Use for short pieces of text less one paragraph in length.
-
Use when there are links pointing to sections within a page.
-
Create hierarchy levels by nesting accordions within accordions.
-
Include other components in an accordion. For example, tables and images.
-
Use when the user has the option to print a page.
-
Add other UI elements within the accordion heading. For example, icons.
-
Use if users need to see all information on a page, break up the content to make it easy to scan and digest. For more information, go to Content structure.
Accessibility considerations
-
Accordions increase interaction cost. Users to take an extra step to select a header to see information. Consider this issue when using accordions.
-
Hiding content behind navigation diminishes people’s awareness of it.
-
Accordions are often not well-suited for printing documents and require people to print snippets of content at a time. Make sure to optimise your pages for printing.
For more information, go to Accordion pattern (sections with Show and hide functionality).
Added accessibility considerations to enhance the guidelines and provide more comprehensive information for our users.
Example

FINAL DESIGN???
Design systems always require maintenance and iterations based on current best practices, so there is never truly a final design. The same applies to the accordion component. I designed this component two years ago, and based on recent feedback, I have iterated on it once again.
I will share the current design of the component first, followed by the ongoing iteration design.
Current design


CURRENT CONCERNS

1. Having the chevron on the right is not accessible when zoomed in by assistive devices.
2. When the label is long and goes on multiple lines the chevron is middle aligned. This may not be the best practice
External examples of chevron on the left
Uk.Gov Design system
Uk. gov Design system moved chevrons to the left so it can be easily seen by magnification software users .
Carbon Design system
Carbons’ chevrons in the accordion are right aligned by default but they state left aligned are more accessible for users with low vision as the expanded/ collapsed indicator is closer to the accordion title.


Giffgaff Design
Giffgaff state that for icon positioning they must be on the left. They state that this speeds up a task time (15%) and shortens the distance users have to scan. They also sited a research (see here) that tested this and can up with this solution.

External examples with long titles
Uk.Gov Design system
Clarity Design system
Coral Design system
Accordion with a summery line under section heading and heading on multiple lines



EXPLORATION
Solution 1

Solution 2

Feedback in the review session -
If we choose the option of a right chevron for closed state we need to have a good validated reason and completed user testing. Generally left and right chevrons are more related to previous and next actions. so we would want to validate that this is viable and not confusing.
Solution 3

Feedback in the review session -
1. Personally, I prefer option 1 and if we want to move to option 3 then we should look at testing it with consumers and users before just dropping it on them.
2. option 3 is preferred from an accessibility stand point but also note that it could be too bulky
NEXT STEPS
-
Review session outcome:
-
The team decided to proceed with solution option 1.
-
-
Backlog tickets:
-
Design & Development: A backlog ticket has been created for both the design and development teams to update the chevron so that it is left top-aligned.
-
"Open All" and "Close All" Alignment: Ticket also includes to update the alignment of the “Open All” and “Close All” buttons, ensuring they are left-aligned.
-
-
Implementation:
-
The design and development teams will work on these updates in the upcoming sprints, with a focus on ensuring usability and accessibilty of the component.
-