Accordions

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interactions.
• Note.
• Examples of components.

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.

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

• Each panel header must be marked up with <button>.
• Each panel header tab must be surrounded by a header tag (<h1> to <h6>), depending on the context in which the accordion is placed.
• The aria-expanded attribute must be added to each header tab. Its value will be set dynamically based on the state of the accordion:
  • aria-expanded="true" when the associated panel is open.
  • aria-expanded="false" when the associated panel is closed.
• Each header tab must be attached to its panel by means of the aria-controls attribute:
  • Each panel must have an id attribute set to a unique value.
  • Each panel header tab must have an aria-controls attribute set to the value of the id attribute of the associated panel.

Keyboard interactions

Enter or Spacebar

• If the keyboard focus is on the header tab of a closed panel, one of these keys opens the associated panel. If the accordion authorizes the expansion of only one panel at the time, and if another panel is already open, it closes the panel.
• If the keyboard focus is on the header tab of an open panel, one of these keys closes the associated panel if the accordion authorizes the collapse of that panel. Some accordions only allow one panel to be expanded at any time. In that case, the open panel cannot be closed by activating its associated heading tab.

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

Comments

Back to top