Progressively enhanced ARIA accordions

See the source code for this demo on GitHub.

The following accordion examples are enhanced from a basic HTML pattern of container > heading + sub-container.

For example:

<div class="accordion" data-aria-accordion>
  <h2 data-aria-accordion-heading>Heading of my panel</h2>
  <div data-aria-accordion-panel>
    <p>Content goes here</p>
  </div>
</div>

So without JavaScript, they will retain an appropriate document structure and the content will be completely accessible.

Demo 1: No default opened panel & ability to open multiple panels at a time.

Chapter 1

Here is the first panel of content.

This particular accordion example can have multiple opened panels at a time, or every panel closed.

Chapter 2

By using the data-multi attribute, multiple panels can be opened at once.

Chapter 3

The data-default="none" attribute is used to indicate that no panel will be open by default, when the accordion is initially rendered.

Demo 2: Constantly opened panel & nested accordion example

Chapter 4

Using the data-constant attribute on the parent accordion wrapper will require that an accordion panel be perpetually set to open.

Chapter 5

When panels are open, their corresponding trigger (button) will be announced as "dimmed" or "unavailable", so it's clear that while the trigger exists, it can't presently be activated.

Chapter 6

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.

Chapter 6.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.

Chapter 6.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.

Demo 3: Accordion with second panel opened by default, only one panel opened at a time, but all may be closed.

Chapter 7

Kind of like a choose your own adventure book, this panel was skipped over as Chapter 8 was opened by default.

Chapter 8

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

Demo 4: Accordion contained within an <ol>, with no panels open by default.

  1. Chapter 9

    Using the data-constant attribute on the parent accordion wrapper will require that an accordion panel be perpetually set to open.

  2. Chapter 10

    When panels are open, their corresponding trigger (button) will be announced as "dimmed" or "unavailable", so it's clear that while the trigger exists, it can't presently be activated.

  3. Chapter 11

    Sometimes accordions are desired within accordions. Typically this sort of nesting should be avoided, as it can create a more complex UX than should really be necessary.