WCAG

Appearance

Accordions

Accordions can be created in two ways.

  1. Using the <summary>/<details> elements.
  2. Using custom code with ARIA attributes.

<summary>/<details> elements ​

<details>: The Details disclosure element element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Using custom code ​

It is also possible to create accordions using your own code in conjuction with ARIA attributes.

Accodrion trigger ​

For the accordion trigger, make sure a <button> element is used. This button should have two ARIA attributes:

  1. aria-expanded to indicate the active state of the accordion.
  2. aria-controls to link the button to the panel that will be toggled.

Accordion content ​

The part where the accordion content is shown also requires two attributes.

  1. role="region" This creates a landmark region.
  2. aria-labelledby, which points to the associated button label.

Keyboard navigation ​

Make sure the accordions support keyboard navgiation. They should have a logic tab order and should be toggable by either the Enter or Space key.

Example ​

A good example and documentation of this accordion can be found on https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/.