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 ARIA Authoring Practices Guide (APG) of the W3C.

Core HTML base

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

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

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

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.


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


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.


Add a comment

All fields are mandatory.

Back to top