Accordion

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

• To organize related information.
• To shorten pages and reduce scrolling when content is not crucial to read in full.
• When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.

1. Header: contains the section title and is control for revealing the panel.
2. Icon: indicates if the panel is open or closed.
3. Panel: the section of content associated with an accordion header.

Title

• The title should be as brief as possible while still being clear and descriptive.

• Each title should be wrapped in a role heading (h2-h6) that is appropriate for the information architecture of the page.

Body

• Content inside of a section may be split into paragraphs and include sub-headers if needed.

When the accordion content is longer than the viewport, the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.

States

The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded.

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.

A user can then independently expand each section of the accordion allowing for multiple sections to be open at once.

In addition to the collapsed and expanded states, accordions also have interactive states for hover and focus.

Mouse

Users can trigger a state change by clicking on the chevron or clicking anywhere in the header area.

View all specs on Zeroheight.

Interactive States

There is no max-height for an open panel but an accordion may scroll if constrained by vertical space. The width of an accordion varies based on the content, layout, and page design. The icon used in the header is a chevron. The accordion has an indented default alignment but can also be set to have a flush alignment.

Structure measurements | px / rem

Spacing measurements | px / rem

Margin-Right

Accordions have amargin-right: 25% with the percentage being based off the width of the container it is placed in.

Body copy, including titles, in an accordion always follows the margin-right rules. However, inputs and other components may still expand to the full width of the accordion panel.

Headings

Accordions are not set as headings by default. For improved accessibility, annotate accordions as headings on the first occurrence in a product. Annotate the heading level of accordions as needed.

If accordion titles act as headings, annotate for development.

Development Considerations

• The accordion header has a role of <button>, with an aria-expanded attribute set to "true" or "false".
• The button has an aria-controls property set to the unique id of the panel it controls.

Users can navigate between accordion headers by pressing Tab or Shift-Tab. Users can trigger a state change by pressing Enter or Space while the header area has focus.

Each accordion is a tab stop. Space or Enter keys expand or collapse accordions, which are collapsed by default. Interactive elements within expanded accordions integrate into the tab order automatically.

Accordions and interactive elements in the expanded content are in the tab order and keyboard operable.

The collapsed or expanded state of the accordions is programmatically set by default, eliminating the need for designers to provide text equivalents for the chevron icons.