Accordeon

The accordion is a UI component that allows sections of content to expand and collapse. It is useful for presenting information in a compact way by revealing only what the user chooses to explore. Instead of displaying everything at once, the accordion keeps the interface clean and focused. This helps reduce cognitive load, supports better scanning, and lets users control how much information they want to see at any moment. By using the accordion, you can structure content in a way that feels organised and easier to navigate.

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

When to use it (and when not to)

Use the accordion when:

You need to present several groups of related information, but not all of it needs to be visible at once.
You want to reduce visual clutter and keep the page easier to scan.
Users may only need to access some details depending on their specific needs or interests.
You want to avoid long scrolling, especially on mobile devices or content-dense pages.
The content in each section can be understood independently from the rest.

Avoid using the accordion when:

The content is essential for understanding the page and should remain visible without interaction.
Users need to compare information across multiple sections at the same time.
The page only contains one section of information (in that case, display it directly).
Frequent opening and closing would interrupt the user’s workflow or slow them down.

Quick summary of accessibility & consistency

The accordion must be fully operable with the keyboard. Users should be able to navigate to the header and toggle it using Enter or Space.
The header must behave as an interactive element with a clear focus state, so users can easily see where they are.
Open and closed states must be communicated visually and programmatically. This includes:
A clear change in icon direction or state indicator.
Appropriate ARIA attributes such as aria-expanded and aria-controls.
The content panel should be associated with the corresponding header using unique IDs for clear screen reader navigation.
Ensure text and icon contrast meets WCAG AA standards to support readability in different environments.
The component should follow consistent spacing, typography, and motion guidelines from the design system to reinforce predictable behavior across the interface.

Properties

State : Collapsed by Contrast

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-default#e4e4e4

Accordion

Width: 312

Border radius: 0

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-muted#a8aaac

State : Expanded by Contrast

True

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-emphasis#ffffff

Text

Text color:

color-foreground-contrast-default#fbfbfc

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-muted#a8aaac

Text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Styling

Colors

Name	Applied as	Applied to
`color-foreground-contrast-emphasis`	Text color	Accordion Title
`color-foreground-contrast-emphasis`	Text color	Accordion Title
`color-foreground-neutral-default`	Text color	Accordion Title
`color-foreground-neutral-default`	Text color	Accordion Title
`color-border-neutral-muted`	Border color	Line
`color-border-neutral-muted`	Border color	Line
`color-border-contrast-default`	Border color	Line
`color-border-contrast-default`	Border color	Line
`color-border-contrast-emphasis`	Border color	Line
`color-border-contrast-emphasis`	Border color	Line

Text Styles

Name	Applied as	Applied to
Lorem Ipsum `typography-body-6-font-weight-default`	Text style	Text
Lorem Ipsum `typography-body-6-font-weight-default`	Text style	Text
Lorem Ipsum `typography-body-6-font-weight-emphasis`	Text style	Accordion Title
Lorem Ipsum `typography-body-6-font-weight-emphasis`	Text style	Accordion Title

Accessibility

For Design

All accordion states (collapsed, expanded, hover and focus) must maintain accessible contrast in both light and dark background contexts.
Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces. Focus should be clearly distinguishable from hover.
Interaction feedback (hover, expanded) must use more than colour alone to convey state. This can include icon rotation, border emphasis, or background changes.
Colour tokens used within the accordion should be semantic (e.g. foregorund/neutral/default) rather than fixed values. This ensures the accordion adapts correctly to different themes or surfaces.
The icon indicating the open/closed state must have a clear and consistent visual transformation (e.g. rotation) and should not rely only on colour to communicate meaning.

Accessibility compliance for Toyota

State	Label Colour	Border Colour	Contrast Ratio	Passes WCAG AA?
Rested	#FFFFFF	#282830	11,5:1	✅ Yes
Hover	#15151B	#A8AAAC	11,5:1	✅ Yes
Expanded	#15151B	#282830	11,5:1	✅ Yes

For Dev

To ensure the accordion meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

Semantic HTML
- Use a semantic <button> element for the accordion header. Do not use <div> or <span> with click handlers.
- The content region must be associated with the header using aria-controls and aria-expanded.
Keyboard Navigation
- Accordion headers must be reachable using Tab.
- Panels must toggle open/closed with Enter and Space.
- If the accordion is part of a multi-expand list, arrow key navigation may also be supported as an enhancement.
Screen Reader Support
- The header text must clearly describe the content it controls.
- The panel must use role=“region” and reference the header with aria-labelledby or aria-controls.
- Icon-only headers are not permitted; they must include visible text or an accessible label.
Interaction Feedback
- Expanded state must be announced via aria-expanded.
- Visual changes should reinforce state (icon rotation, background, border).
- Avoid relying solely on colour to indicate open/closed status.
Responsive and Tap Targets
- The accordion header’s interactive area must be at least 44 px in height to support touch accessibility.

Case	✅ Good	❌ Bad
Semantic Structure	`<button aria-expanded="true">`…	`<div onclick="toggle()">`…
Keyboard Navigation	Toggles using Enter / Space	Only toggles with pointer click
Focus Visibility	Clear, high-contrast focus ring	Focus removed or replaced by hover-only styling
Open/Closed State	Icon rotation + aria-expanded + background shift	Only colour change with no semantic state

Usage

Do

Guidance on how to use a component.

Use it to organize and display content progressively, allowing users to reveal or hide information as needed.
Help reduce cognitive overload by showing only the most relevant content at first glance.
Use when the user does not need to see all information at once or when content is grouped by topics or categories.
Maintain consistent spacing between accordions to support scannability and visual rhythm.
Use clear and descriptive titles for accordion headers to communicate their purpose.
When multiple accordions are used, consider whether they should expand independently or as a single-item expansion group (only one open at a time).
Keep animations smooth and consistent across variants and themes.
Verify that keyboard navigation and focus indicators work properly across all accordion items.

Don’t

Guidance on what to avoid when using a component.

Don’t use accordions to hide critical or frequently needed information. If users must always see the content, it shouldn’t be collapsible.
Avoid nesting accordions inside other accordions, as it complicates navigation and accessibility.
Don’t use too many accordion items in one view – it may cause scroll fatigue and reduce clarity.
Don’t rely on animation alone to signal state change – always provide clear visual or semantic cues.
Don’t rely solely on colour or icons to indicate the open/closed state – always include a clear visual cue (e.g., arrow rotation).
Don’t remove or modify focus states that help users understand where they are when navigating with a keyboard.
Avoid using accordions in layouts with minimal vertical space, where content expansion will disrupt the structure.

Best Practices

Guidance on where this component has been used

Structure and Behavior

Each accordion item should contain a title (trigger) and a content area (panel).
Titles must be keyboard-focusable and toggle their state using Enter or Space.
Only one interactive element should control the expansion to ensure proper accessibility.
The expand/collapse icon must rotate or animate consistently to reinforce the state change.
Maintain minimum touch target areas (44x44px) for mobile/touch devices.

Content and Copy

Keep titles short and scannable, typically one line.
Start titles with keywords that help users quickly identify the content.
Use sentence case for readability (e.g., “Account details” instead of “ACCOUNT DETAILS”).
When possible, use parallel structure across accordion titles (e.g., all start with verbs or nouns).

Accessibility

Accordions should use ARIA roles and attributes such as aria-expanded, aria-controls, and aria-labelledby.
Ensure all states (collapsed, expanded, hover, focus) meet WCAG 2.1 AA contrast standards.
All accordions must be fully operable via keyboard and navigable using Tab and toggle them with Enter or Space.
When an accordion expands, focus should remain on the header for context retention.
Avoid disabling accordion headers unless necessary – they communicate interactiveness by design.