Accordion

In most cases, an accordion begins with all sections collapsed. Users have the flexibility to expand a section by interacting with the heading button, which is clickable anywhere within it.

The accordion needs to be keyboard-friendly for both desktop and mobile use. When navigating through the heading buttons using the tab key, a distinct and robust visual focus indication is provided.

Upon pressing the spacebar or enter key, the heading buttons activates, revealing the collapsed.

Keywords

• Accordion Header: A label that doubles as a control, enabling the option to display or conceal content.
• Accordion Panel: A section containing content that is linked to an accordion header.

Breakdown of Components

Accordion Header:

1. The accordion header must be a button type element must be defined using a <button> tag or a role="button".
2. It should be easily recognisable as an interactive element. For example, buttons commonly have a rectangular or rounded shape accompanied with a border or drop-shadows.
3. It must be reachable using the tab key on the keyboard.
4. Activation of the button is accomplished through the enter/spacebar keys on the keyboard.
5. The button is responsible for both opening and closing the accordion.
6. The target area of the button must not be smaller than 44x44 pixels.
7. The button must display a clear focus indicator when the focus is on the button. This indicator should be at least 2 pixels tall, covering the button's width, and have a contrast ratio of 3:1 for accessibility.
8. Changes in the state of the accordion (expanded or collapsed) should be visually highlighted, so users can easily discern whether a section is open or closed. This is done through a WAI-ARIA attribute aria-expanded.
   1. Expanded state: aria-expanded="true"
   2. Collapsed state: aria-expanded="false"
9. The button should be linked to the panel it opens. Use the WAI-ARIA attribute aria-controls to inform assistive technologies. The attribute take the identifier (id) of the panel.

<button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="panel1" id="accordion1id" >
    Titre de l'accordéon
    <span class="accordion-icon"></span>
</button>

<button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="panel1" id="accordion1id" >
    Titre de l'accordéon
    <span class="accordion-icon"></span>
</button>

Accordion Panel:

1. The Accordion panel houses the content for each accordion section.
2. All interactive elements within the Accordion panel must be accessible using the tab key on the keyboard.
3. Define the panel as a region using the role="region" attribute.
4. Give a relevant title to the panel. This is important to help users of assistive technologies such as a screen reader to better understand the content of the panel. This is done through the attribute aria-label or aria-labelledby. The aria-label can take a string of values while the aria-labelledby can be used to reference the name of the accordion header through the id attribute.

<div id="panel1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
  <!-- Contenu du panneau -->
</div>

<div id="panel1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
  <!-- Contenu du panneau -->
</div>

Screen reader

A screen reader should vocalize the following for the button:

1. A relevant name that clearly conveys its purpose. This can be done either using the visual title added inside the <button> tag or through accessibility attributes such as the aria-label.
2. A relevant role that identifies it as a button. Using the HTML tag <button> will automatically add the role button for screen readers but the WAI-ARIA attribute role="button" can also be used
3. The current state, indicating whether the section is expanded or collapsed. WAI-ARIA attribute aria-expanded informs screen readers that the item is expanded or collapsed.