Accordéon

Dans la plupart des cas, un accordéon commence avec toutes les sections repliées. L’utilisateur peut déployer une section en interagissant avec le bouton d’en-tête, cliquable sur toute sa surface.

L’accordéon doit être utilisable au clavier sur desktop comme sur mobile. En naviguant entre les boutons d’en-tête avec Tab, un indicateur de focus clair et robuste doit apparaître.

En appuyant sur la barre d’espace ou la touche Entrée, le bouton d’en-tête s’active et affiche le panneau attenant.

Mots-clés

• En-tête d’accordéon : libellé qui fait aussi office de commande, permettant d’afficher ou de masquer le contenu.
• Panneau d’accordéon : section de contenu associée à un en-tête d’accordéon.

Détail des composants

En-tête d’accordéon :

1. L’en-tête d’accordéon doit être un bouton : défini avec une balise <button> ou un role="button".
2. Reconnaissable comme interactif : forme de bouton (rectangulaire/arrondie), avec bordure ou ombre portée.
3. Accessible au clavier : atteignable via la touche Tab.
4. Activation clavier : Entrée ou Espace déclenchent l’action.
5. Comportement : le bouton ouvre et ferme l’accordéon.
6. Zone cible minimale : 44 × 44 px.
7. Indicateur de focus visible : au focus, afficher un marqueur d’au moins 2 px de hauteur couvrant toute la largeur du bouton, avec un contraste ≥ 3:1.
8. Retour visuel d’état : les changements ouvert/replié doivent être perceptibles ; utiliser l’attribut WAI-ARIA aria-expanded pour refléter l’état.
   1. État déployé : aria-expanded="true".
   2. État replié : aria-expanded="false".
9. Le bouton doit être lié au panneau qu’il ouvre. Utilisez l’attribut WAI-ARIA aria-controls pour informer les technologies d’assistance. Cet attribut prend l’identifiant (id) du panneau.

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

Panneau d’accordéon :

1. Le panneau d’accordéon contient le contenu de chaque section d’accordéon.
2. Tous les éléments interactifs présents dans le panneau d’accordéon doivent être accessibles au clavier à l’aide de la touche Tab.
3. Définissez le panneau comme une région en utilisant l’attribut role="region".
4. Donnez un titre pertinent au panneau. Cela aide les utilisateurs de technologies d’assistance, comme les lecteurs d’écran, à mieux comprendre le contenu du panneau. Pour ce faire, utilisez l’attribut aria-label ou aria-labelledby. L’attribut aria-label peut recevoir une chaîne de caractères, tandis que aria-labelledby peut référencer le nom de l’en-tête de l’accordéon via son attribut id.

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

Lecteur d’écran

Un lecteur d’écran doit vocaliser les éléments suivants pour le bouton :

1. Un nom pertinent qui exprime clairement sa fonction. Cela peut être fourni soit par le titre visible ajouté dans la balise <button>, soit via des attributs d’accessibilité comme aria-label.
2. Un rôle pertinent indiquant qu’il s’agit d’un bouton. L’utilisation de la balise HTML <button> ajoute automatiquement le rôle button pour les lecteurs d’écran, mais l’attribut WAI-ARIA role="button" peut également être utilisé.
3. L’état actuel, indiquant si la section est déployée ou repliée. L’attribut WAI-ARIA aria-expanded informe les lecteurs d’écran que l’élément est ouvert ou fermé.