Composant accessible · outil gratuit

Accordéon accessible (details ou bouton aria-expanded) : code vérifié

Un accordéon accessible est une suite de boutons qui ouvrent et ferment chacun un panneau. Chaque bouton est un vrai <button> (ou un <summary> natif), placé dans un titre, et aria-expanded annonce s'il est ouvert. Un panneau fermé est réellement masqué (attribut hidden) : il n'est ni lu ni atteignable au clavier.

Critères RGAA 4.1.2 : 7.1, 7.3, 10.8 · WCAG 2.2 : 1.3.1, 2.1.1, 4.1.2 · mis à jour le 2 novembre 2026.

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Technique

Niveau des titres

Sections (« Titre | Texte », une par ligne)

Introduire une erreur fréquente

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<div class="accordeon">
  <h3 class="accordeon-titre">
    <button type="button" class="accordeon-bouton" aria-expanded="false" aria-controls="acc-1">Livraison</button>
  </h3>
  <div id="acc-1" class="accordeon-panneau" hidden>
    <p>Livraison en 48 h ouvrées partout en France métropolitaine. <a href="#">En savoir plus<span class="sr-only"> : Livraison</span></a></p>
  </div>
  <h3 class="accordeon-titre">
    <button type="button" class="accordeon-bouton" aria-expanded="false" aria-controls="acc-2">Retours</button>
  </h3>
  <div id="acc-2" class="accordeon-panneau" hidden>
    <p>Vous avez 30 jours pour nous retourner un article. <a href="#">En savoir plus<span class="sr-only"> : Retours</span></a></p>
  </div>
  <h3 class="accordeon-titre">
    <button type="button" class="accordeon-bouton" aria-expanded="false" aria-controls="acc-3">Paiement</button>
  </h3>
  <div id="acc-3" class="accordeon-panneau" hidden>
    <p>Carte bancaire, virement ou PayPal. <a href="#">En savoir plus<span class="sr-only"> : Paiement</span></a></p>
  </div>
</div>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

Personnes qui naviguent au clavier : un en-tête en <div> cliquable ne reçoit pas le focus : les panneaux restent fermés pour elles.
Personnes aveugles : sans aria-expanded, elles ne savent pas si un panneau s'est ouvert ; un panneau fermé mais lu leur fait entendre un contenu « caché ».
Personnes ayant des troubles cognitifs : un accordéon bien titré réduit la quantité de texte affichée d'un coup.

Le comportement attendu

Au clavier

Touche ou moment	Ce qui doit se passer
Tab	Passe d'un en-tête à l'autre, et entre dans le contenu d'un panneau ouvert.
Entrée ou Espace	Ouvre ou ferme le panneau de l'en-tête qui a le focus.

Avec un lecteur d'écran

Chaque en-tête est annoncé « Livraison, bouton, réduit », puis « développé » après l'ouverture.
Placés dans des titres, les en-têtes apparaissent dans la liste des titres du lecteur d'écran : on saute de section en section.
Un panneau fermé avec hidden n'est pas lu.

Les erreurs les plus fréquentes

Des <div> cliquables. Visuellement des en-têtes, mais ni focalisables ni annoncés comme boutons.
Un état non annoncé. Pas d'aria-expanded : le bouton ne dit pas s'il est ouvert.
Un contenu fermé encore lu. Hauteur à 0 ou opacité à 0 : le contenu est invisible mais lu, et ses liens restent atteignables (critère 10.8).
Des boutons hors des titres. L'accordéon disparaît de la liste des titres : on ne peut plus y naviguer par sections.

Tester soi-même

Avec Tab, atteignez chaque en-tête ; Entrée ou Espace doit ouvrir et fermer son panneau.
Panneau fermé, appuyez sur Tab : le focus ne doit pas entrer dans son contenu.
Avec un lecteur d'écran, vérifiez l'annonce « réduit » ou « développé ».

Ce qu'Accessia détecte dans un audit

Accessia signale automatiquement les boutons sans nom (critère 11.9). Un en-tête cliquable qui n'est pas un bouton n'est pas détecté par l'analyse : la « Simulation des troubles » de l'extension Chrome (Motricité, clavier seul) relève les éléments qui semblent cliquables mais ne sont pas atteignables au clavier, à confirmer. Le reste se vérifie en utilisant l'accordéon, comme le fait le test ci-dessus.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

details ou boutons aria-expanded ?

<details> est natif, sans script, et annonce son état. Son résumé ne peut pas être un titre : si la navigation par titres compte (longue FAQ), préférez des boutons placés dans des titres.

Faut-il role="region" sur les panneaux ?

C'est possible pour quelques panneaux (six au plus), avec aria-labelledby vers le bouton. Au-delà, trop de repères gênent plus qu'ils n'aident.

Un panneau doit-il se fermer quand un autre s'ouvre ?

Ce n'est pas exigé. Laisser plusieurs panneaux ouverts est souvent plus simple à comprendre.

Ce code rend-il mon site conforme ?

Il rend cet accordéon conforme aux contrôles affichés. Les titres et les textes restent à juger.