Accordions

Summary

Principle

Accordions are dynamic components that optimize the display of content in a limited space with expand/collapse mechanisms on the panels. They are usually controlled by a button which toggles the content of each panel in and out of view.

This code is based on the “Accordion” design pattern found in the WAI-ARIA 1.1 Authoring Practices of the W3C.

Core HTML base

<h2>
  <button aria-expanded="false" aria-controls="accordion-panel-1">Panel 1 header</button>
</h2>
<div id="accordion-panel-1">
  [Panel 1 content (hidden)]
</div>

<h2>
  <button aria-expanded="true" aria-controls="accordion-panel-2">Panel 2 header</button>
</h2>
<div id="accordion-panel-2">
  [Panel 2 content (visible)]
</div>

<h2>
  <button aria-expanded="false" aria-controls="accordion-panel-3">Panel 3 header</button>
</h2>
<div id="accordion-panel-3">
  [Panel 3 content (hidden)]
</div>

ARIA roles, states and properties

Keyboard interactions

Enter or Spacebar

Note

In the HTML code example, heading level 2 (<h2>) is used to mark up the panel headers. The heading level should be adapted to the context of the page: it is important to maintain a logical heading hierarchy in the page.

For instance, if an <h2> heading introduces the accordion, then each panel header becomes a child of this level 2 heading and should be marked up with <h3>.

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

  1. Accordion example.
  2. Collapsible Sections.
  3. Expand and Collapse using ARIA states.
  4. handorgel.
  5. Progressively enhanced ARIA accordions.

Comments

Add a comment

Required fields are marked *.

Back to top