Progressively Enhanced Accordions that implements ARIA Authoring Practices 1.1

The below example sections demonstrate the design pattern for accordion. The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions.

Notice that when JavaScript disabled, each section retains an appropriate document structure and the content is completely accessible.

Example 1: The default one. Only one panel may be expanded at a time, but do not support a collapse function.

Accordion Header 1

This implementation is the default one and does not require any options. One panel will be expanded at all times and only one panel will be allowed to be expanded; so, do not support a collapse function.

Accordion Header 2

When an accordion panel associated with an accordion header is visible, given that the accordion does not permit the panel to be collapsed, the accordion header button element has an aria-disabled attribute which is set to true.

Accordion Header 3

When focus is on an accordion header for a collapsed panel, activating the accordion header button trigger will expand the associated panel. If another panel is expanded, this will collapse that panel.

Example 2: Only one panel opened at a time, but all may be closed. The second panel is opened by default.

Accordion Header 4

Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.

This is accomplished via the data-aria-accordion-allow-toggle, set on the parent accordion container.

Accordion Header 5

This panel is set to be opened by default, when this particular accordion renders. This is accomplished via the data-aria-accordion-open-default="2" attribute, set on the parent accordion container.

Accordion Header 6

When focus is on an accordion header for a collapsed panel, activating the accordion header button trigger will expand the associated panel. If another panel is expanded, this will collapse that panel.

Example 3: No default opened panel. Ability to open multiple panels at a time. The last panel contains a nested accordion example with a transition effect.

Accordion Header 7

Allow for multiple accordion sections to be expanded at the same time. Assumes each toggle to both open and close otherwise the toggle on open sections would be disabled.

Accordion Header 8

This is accomplished via the data-aria-accordion-allow-multiple attribute option, set on the parent accordion container.

Accordion Header 9

When focus is on an accordion header for a collapsed panel, activating the accordion header button trigger will expand the associated panel. If (an)other panel(s) is (are) opened, this (those) one will keep its (their) expanded state.

Accordion Header 10

Sometimes accordions are desired within accordions. Typically this should be advised against, as it can create a more complex UX than should really be necessary.

Accordion Header 10.1

As an example of how nested accordions need to be considered their own component, and not related to the parent accordion panel set, this accordion functions independently and differently than the parent accordion.

Accordion Header 10.2

Only a single panel of this accordion can be opened at time, but this accordion also allows for the ability to collapse all panels.

Example 4: Accordion contained within an <ol> list element, with only one panel opened at a time, but all may be closed.

  1. Accordion Header 11

    Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.

  2. Accordion Header 12

    When focus is on an accordion header for a collapsed panel, activating the accordion header button trigger will expand the associated panel. If another panel is expanded, this will collapse that panel.