Skip to main contenteBay Playbook

Accordion

v1.1

An accordion is a tool used to hide and reveal content as part of progressive disclosure. Tapping the icon button on each accordion row will expand or collapse the content.

Stylized artwork of an accordion.

Guidelines

Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.

Keyboard interaction

The Accordion component can hide or reveal content in each row. Each accordion title will be in the natural tab index.

Tab Sequence (collapsed)

  1. Accordion title 1
  2. Accordion title 2
  3. Accordion title 3
  4. etc.
An example of an Accordion with three rows, in collapsed states. The second row title is shown with focus state treatment.

Tab Sequence (expanded)

  1. Accordion title 1
  2. Revealed interactive element(s)
  3. Accordion title 2
  4. etc.
An example of an Accordion with three rows, in closed and open states. In the open state the content includes checkbox list with one item in focus state treatment.

Reading order

Virtual cursor must be able to move from one header to the next. With virtual cursor on an accordion title, it must be able to open the row via click event simulation. For auto-collapse accordions, any other open row must close, but this should not be announced.