Accordion

Components

Accordion

The accordion is a vertically ordered drop-down list, which hides or allows you to view sections and content.

Preview

Figma

Uses

When to use

In cases where we want to show a lot of content in little space.

Content separated into collapsible sections.

Within a section to organize the related information.

Reduce the displacement by collapsing the non-essential content.

Accordions allow a complex form to be divided step by step into smaller sections.

When not to use

In cases where we need the user to see or read information by obligation, as it could be hidden behind a click.

With little content, because if the user is likely to see all the information at once, they do not need a section split and one click more to access that content. Accordions increase the cognitive load and cost of interaction, as users have to make decisions about which headers to click on.

Behaviour

The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates what state the accordion is in. The chevron points downwards to indicate that it is collapsed and can be opened in that direction or upwards to indicate that it is expanded and can be collapsed in the direction indicated by the chevron.

Accordions begin by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high-level overview of the available information. The user can extend each section of the accordion independently, allowing several sections to be opened at once.

Behaviour

Collapse

Expand

States

Default

Hover

Focus

Disabled

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The title of each accordion header is contained in an element with role="button". This ensures that the assistive technologies advertise it correctly.

The uses of alternating folding tabindex="0"make it possible to access it using the tab key or move the focus by programming.

Reduce the scroll by collapsing non-essential content.

If the accordion is visible, the button element has the aria-expanded attribute set to true. If the panel is not visible, aria-expanded has a false value for transmitting expansion and contraction functionality to assistive technologies.

If the accordion panel is disabled, the aria-disabled property is set to true and cannot be expanded.