Accordion

Accordions give users an overview
of available content and help people to
focus by limiting the amount of
information present at once.

  • Use to display secondary information that people may find useful, but if present, would distract people from their primary task. For example, when completing a form to get a quote, additional information about how the quote is generated could be provided in an accordion, instead of distracting the user from completing the form.
  • To display any essential information, as hidden content can be easily missed.
  • If you're planning to use just one segment of an Accordion, we recommend using a Disclosure component instead.

There are other components that can be used for hiding content, such as Disclosure for hiding a single piece of content, and Tabs for multiple sections of distinctive content.


Live example

Storybook failed to load. Please connect to the VPN to access.

Open by default

All sections are closed on load by default. Accordion is an uncontrolled component and manages its own state - set the default state with the expanded prop.

Custom headings

Accordion uses the Heading4 component by default, but this can be overridden using the headingComponent prop. You can not set headingComponent to the single Accordion instead it should be set to AccordionGroup which will set the same heading to all of it's child Accordions. Use the semantically correct heading level.

Availabile platforms

Platform

Available

Figma

v1+

Web (@ovotech/element)

v1+

App (@ovotech/element-native)

v1+


How to use it

  • use accordions to break down longform content into readable, digestible information
  • keep headlines brief but descriptive
  • highlight the most critical information in a section - accordions work better when the user only needs a few key pieces of information
  • keep headlines functional
  • sparingly include text links and secondary links inside accordions
  • put primary actions inside an accordion
  • include key product benefits or feature information inside an accordion
  • add multiple paragraphs in the panel copy
  • include subheadings - the format should consistently be: headline + panel copy
  • always use questions as headings - Q&A content is often presented as accordions, but they’re not exclusively for Q&A
  • put accordions inside of accordions
  • use an accordion for a single element - use a disclosure component instead

Accordion Content

In general, accordion content is information that’s useful to add, but would distract from the customer journey if we included them on the page.

This means accordions work best with content that’s more tertiary, like the fine print of a legal disclaimer, or details on how kWh are measured.

Why choose OVO?

Our free app lets you track your home energy use. We’re powering over 4 million homes, so you’ll be in safe hands. Plus, we give back – every year, we plant 1 million trees in the UK as part of our Planting Promise.

Why choose OVO?Your energy essentials

Use our free app to track energy use in your home.

Planting Promise

Every year, we plant 1 million trees in the UK.

How are we powering over 4 million homes? +


Properties

These are the properties for anyone implementing this component and code.

AccordionGroup

Name

Values

Default

headingComponent

rendered as an <h3>

ComponentType|String

Heading4

...

JSX.IntrinsicElements["div"]

 

Accordion

Name

Values

Default

title (required)

ReactNode

 

expanded

Boolean

false

onToggle(expanded) => null

Function

 

...

JSX.IntrinsicElements["div"]

 


Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As someone using the component, I want to be able to understand the content within an accordion from its title alone, so that I don't have to expand and search through each accordion to find what I'm looking for.
  • As a keyboard-only user, I want to be able to expand the accordion in order to find the information that I need.
  • As a keyboard-only user, I want to be able to see which of the accordions I'm currently interacting with.
  • As a screen reader user, I want to be able to know that I can interact with the accordions and whether they're currently expanded or collapsed.

Test steps

Use these steps to check that the accordion component has been implemented correctly:

  1. Turn on a screen reader.
  2. Navigate to each instance of the accordion component using the Tab key.
  3. Verify that the heading element used is an appropriate heading level (maintaining the page's hierarchy).
  4. Verify that the heading is meaningful and provides sufficient context to the content within the accordion when expanded.
  5. Check that the accordion's meaningful title is announced, as well as whether the accordion is expanded or collapsed.
  6. Using the Space or Enter key, toggle the accordion open, and then check that content within it is announced by the screen reader as expected.
  7. Using the Space or Enter key, toggle the accordion closed, and then check that the now hidden content within the accordion is not announced by the screen reader as expected.
  8. Verify that if the Space key is used for activating the accordion, that the viewport does not scroll.

Avoiding accessibility barriers

We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:

  • It's possible to use content in the accordion's light green title smaller than 18.5px. This results in an insufficient colour contrast ratio. To prevent this, check that any content used has a text size larger than 18.5px.
  • When adding mixed content to the accordion's title, a fixed width may prevent the component from reflowing correctly. To prevent this, ensure that fixed widths are not specified on the component.


External resources