Accordion

The accordion is a vertically stacked list of headings that can be selected to reveal or hide sections of content. 

When To Use

The accordion should be used when aiming to reduce the overall length of page content. Accordions must be made up of more than one section. If there is only one section, do not use an accordion.  Even when you have multiple sections of content an accordion may not be necessary and exposing all the content might be the best option.

While users can open one accordion section at a time, they can also open multiple at once, unlike tabs.

Design

Note: values in brackets may change as we are relying more on CSS Variables. They are correct at the time of writing

accordion-border: --color-border-light (#d0d3d5)
accordion-heading-title-background:  --color-background-light (#ecedee)
accordion-heading-title-font-color: --color-text-black (#000000)
accordion-heading-title-font-size: 22px
accordion-heading-title-hover: underline
accordion-heading-title-padding: --padding-default(10px)
accordion-body-padding: --padding-default (10px)

Accordion Components/Features

Expand All/Collapse All

• The Expand All/Collapse All buttons appear above the accordions on the top right side. 
• These buttons allow users to easily open or close all accordion sections at once. 
• It is important to ensure that screen reader and non-screen reader users understand the current state of the buttons by setting the appropriate aria states and/or colour changes. 
• If the Expand All/Collapse All buttons are not used then only one accordion section can be opened at a time.

Screen Reader Accordion Title (Does Not Appear in Screenshot)

Accordion titles tells screen reader users what is contained within all the accordions in a brief yet descriptive way.  

For example, if the accordions are each descriptions of concert venues, the title should say "Concert Venues." 

This information is used to provide context to the "Expand All/Collapse All" buttons. The current accordions do not visually display this value, but it may be displayed in the future.

Individual Accordion Headings

Each accordion should have a heading that is brief and clearly describes the content within. Keep them as short as possible, five words or less.

Accessibility Features

Aim to follow current accordion ARIA design pattern for keyboard interactions and ARIA role states and properties. Future updates to patterns will be available on this page. 

Navigate-able Via Keyboard

• Up/down moves between sections
• Enter/space opens section
• Option to toggle sections or allow the sections to be opened simultaneously
• Title attribute provided to properly describe the accordion content

How To Use

The City of Toronto has an accessible component library COTUI.

Discussion