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 must 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 must be marked up with <h3>.

Components

The components of the “Accordeons” are shown 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. Some components may require some adjustments.

Comments

Add a comment

Required fields are marked *.

Back to top