eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Working Examples
  • Terminology
  • Best Practices
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  1. Disclosure

Accordion

A series of expanding/collapsing panels of content.

PreviousDisclosureNextCarousel

Last updated 3 months ago

Allows vertical stacking of content panels. Each panel is separated by an interactive panel header. Zero or more panels can be open at any time.

Often used in sidebars and navigation menus for the progressive disclosure of links and filters.

The accordion pattern is a composite pattern; each item in the accordion is a disclosure widget.

Working Examples

You can take a look at the accordion pattern in action on our .

You can get an idea of the required markup structure by viewing our .

Terminology

We use the following terminology when discussing this pattern.

  • accordion: the pattern as a whole, comprised of the following sub-parts

  • panel: each panel in the accordion is a disclosure widget

  • header: each panel displays an interactive summary of the panel contents

  • heading: each header contains a nested heading level element

  • auto-collapse: an accordion that automatically collapses other open panels when a new panel is opened

Best Practices

Each header will be in the natural tabindex, courtesy of the details pattern. This natural tabindex must not be removed or tampered with.

By default, all panels can be in an open, expanded state.

Optionally, the accordion may be restricted to only show one content panel at a time (i.e. opening a panel will close any other open panel). This is known as an auto-collapsing accordion. Note that auto-collapse on accordion should be used cautiously, as it prevents users from comparing content and may disrupt the user experience.

Interaction Design

This section provides detailed instructions for how different input types should navigate and operate the pattern.

Keyboard

Pressing TAB key must move keyboard focus from one header to the next. It will also move focus through any interactive elements inside open panels.

Likewise, pressing SHIFT-TAB keys moves focus backwards through headers and interactive panel content.

Pressing SPACEBAR or ENTER key on a header with keyboard focus must open the panel. For auto-collapse accordions, any other open panel must close.

Screen Reader

Virtual cursor must be able to move from one header to the next.

With virtual cursor on header, it must be able to open panel via click event simulation. For auto-collapse accordions, any other open panel must close, but this should not be announced.

Pointer

Tapping or clicking a header must open the related content panel. For auto-collapse accordions, any other open panel must close.

Developer Guide

The accordion pattern makes heavy use of the details.

HTML

The structure is a list of details widgets. Note that in some browsers the implicit list role is removed when CSS list-style-type: none is applied. To hide the list item markers, use the ::marker pseudo-element .

<ul class="accordion" aria-roledescription="accordion">
    <li>
        <details class="accordion__details" open>
            <summary><h4>Buying</h4></summary>
            <ul>
                <li><a href="http://www.ebay.com">Purchases</a></li>
                <li><a href="http://www.ebay.com">Bids/Offers</a></li>
                <li><a href="http://www.ebay.com">Didn't Win</a></li>
            </ul>
        </details>
    </li>
    <li>
        <details class="accordion__details">
            <summary><h4>Selling</h4></summary>
            <ul>
                <li><a href="http://www.ebay.com">Sold</a></li>
                <li><a href="http://www.ebay.com">Bids/Offers</a></li>
                <li><a href="http://www.ebay.com">Didn't Swell</a></li>
            </ul>
        </details>
    </li>
</ul>

CSS

To address the issue in some browsers where the implicit list role is removed with list-style-type, the following CSS can be applied to hide the list item markers. Beyond this, accordion headers and panels can be styled as desired.

ul.accordion ::marker {
  font-size: 0;
}

JavaScript

For accordions that allow all panels to be open at once, no scripting is necessary; each nested details widget will handle the open and close mechanics.

For accordions limited to a single open panel, the name attribute allows multiple <details> elements to be linked, ensuring only one is open at a time. This approach effectively eliminates the need for JavaScript.

On older browsers that do not yet support the name attribute, the JavaScript steps can be briefly summarized as the following:

  1. Find each nested details element

  2. Listen to toggle event of each details element

  3. When receiving a toggle event, if the details state has moved from closed to open, close all other details elements

ARIA Reference

That's it. Pretty straightforward. You can reference our .

aria-roledescription: defines a human-readable, author-localized description for the of an . In this case, "accordion".

details
examples site
bones site
details
example code on GitHub
role
element