Accordion

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to reveal related content sections, without hiding essential information without a cue.

What to draw

Show clear titles, expanded and collapsed sections, and header interaction states.

How it behaves

Click, touch, Enter, or Space expands or collapses a section. Collapsed content is excluded from keyboard navigation.

What to document in Figma

Define whether multiple sections may stay open. Annotate navigation order and how expanded or collapsed states are communicated.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Accordion.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you visually tell which headings can expand or collapse content?
Can you visually identify which sections are open and which are closed?
Does each section title clearly describe the content that will be revealed?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over an actionable heading?
Does clicking the heading toggle the corresponding panel between open and closed?
When only one section can be open, does opening a section predictably close the others?

Designing for gesture use

Does the heading's touch target have enough area for comfortable activation?
Does tapping the heading toggle the corresponding panel between open and closed?
Is the state change visually perceptible after tapping?

Designing for keyboard use (any non-pointing device)

Is there visible focus on the actionable heading?
Can each heading be activated with ENTER and SPACE?
Can you navigate between headings in the natural order with TAB and SHIFT+TAB?

Designing for screen reader use

Is the actionable heading announced as a button?
Is the open or closed state announced correctly?
Is the relationship between button and panel understandable through its name, order, or programmatic association?

Interaction methods

Possible interaction methods for components of type Accordion.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

Clicking the heading opens or closes its related section.
The heading's visual state should change along with the displayed content.
Collapsed content should not remain navigable by keyboard.

Keyboard interaction (any non-pointing device)

TAB moves focus between headings and other actionable components.
ENTER or SPACE toggles the focused section's state.
arrow keys may be used as an additional feature when documented and consistent.

Keyboard (or gesture) interaction + screen reader

The button should expose its state with aria-expanded.
When used, aria-controls should point to the controlled panel.
Open content should be available in reading and navigation order.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing an accordion

Keyboard navigation

WHEN I use the Tab key to move focus to an accordion heading
The focus I SEE is strongly indicated visually
THEN, when I use Enter or Space
I SEE the related section toggle between open and closed

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and move focus to the component
- I HEAR the heading's name.
- I HEAR that the component is a button.
- I HEAR whether the section is expanded or collapsed.
THEN, when I activate or change the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the component, the following happens:
- I HEAR the heading's name.
- I HEAR that the component is a button.
- I HEAR whether the section is expanded or collapsed.
THEN, when I double-tap or use the appropriate gesture to activate the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Considerations

Considerations for components of type Accordion.

Use accordions to reveal related content, without hiding essential information without a clear indication.
Closed content should not receive keyboard focus.
When only one section may remain open, that rule must be predictable and tested.

References

Additional references for components of type Accordion.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.