Template de design d'accordéon : anatomie, patterns et mise en place

Qu’est-ce qu’un template design accordéon ?

Un template design accordéon est un motif d’interface qui résout le problème des longues pages de FAQ ou de spécifications qui perdent leurs lecteurs à mi-parcours du défilement : une pile verticale de conteneurs repliables qui bascule la visibilité du contenu pour gagner de la place et permet de ne révéler les détails qu’au moment où l’on en a besoin. Dans sa forme la plus simple, le template réunit cinq éléments : un conteneur qui regroupe la liste, un déclencheur ou une ligne d’en-tête avec laquelle l’utilisateur interagit, un libellé court qui annonce le contenu, une icône d’état comme un chevron ou un plus/moins qui signale l’état ouvert ou fermé, et le panneau de contenu masqué lui-même.

Certains templates n’autorisent qu’un seul panneau ouvert à la fois, tandis que d’autres acceptent plusieurs panneaux ouverts simultanément. Ce choix entre ouverture unique et ouverture multiple change la façon dont les internautes comparent les réponses, et il conditionne les décisions de libellé, d’animation et d’accessibilité abordées ensuite. Baliser ces éléments avec un balisage propre et explorable préserve aussi l’architecture de contenu sémantique, pour les humains comme pour les moteurs d’analyse.

Anatomie de l’accordéon : les cinq éléments qui doivent fonctionner ensemble

Chacun des cinq éléments (conteneur englobant, en-tête/déclencheur, libellé ou titre, icône d’état et panneau de contenu) remplit un rôle fonctionnel qui va bien au-delà de la décoration. Si l’un d’eux est mal conçu, le motif entier paraît cassé, même s’il a l’air correct.

Conteneur / racine. L’enveloppe extérieure empile les éléments à la verticale et définit le regroupement, les séparateurs et les espacements. Dans la spécification de Material UI, le composant se compose d’une div racine qui contient des éléments summary et details, ce qui établit explicitement cette hiérarchie.

En-tête / déclencheur. Ce doit être un véritable élément interactif, pas une div stylisée. Carbon Design System définit l’en-tête comme l’élément qui contient le titre de la section et qui sert de commande pour révéler le panneau, ce qui suppose une sémantique de bouton pour qu’il soit focalisable et activable.

Libellé / titre. Le texte contenu dans l’en-tête donne l’aperçu général qui permet de décider s’il faut déplier ou non. Carbon recommande des titres brefs mais descriptifs, alignés sur la structure de titres de la page.

Icône d’état. Généralement un chevron ou un plus/moins, elle signale l’état d’un coup d’œil. Carbon précise que l’icône indique si le panneau est ouvert ou fermé, chevron vers le bas pour replié et vers le haut pour déplié, et Material UI gère automatiquement la rotation de l’icône afin de garder un retour visuel cohérent.

Panneau de contenu. La section associée qui s’affiche ou se masque. Carbon décrit le panneau comme la section de contenu associée à un en-tête.

Une ouverture ou une fermeture brutale, sans animation, donne une impression de dysfonctionnement parce que l’œil perd le contexte. Les deux systèmes appliquent par défaut une courte transition de hauteur avec accélération progressive et exposent des propriétés de transition pour l’ajuster, afin que le contenu semble se déplier plutôt que surgir.

Adapter le motif à l’usage : FAQ, tarifs, spécifications et navigation

Stripe laisse chaque article d’aide s’ouvrir indépendamment, alors que la navigation de sa barre latérale n’autorise qu’une seule section ouverte à la fois : ce contraste résume la règle du template design accordéon, à savoir que les listes de FAQ privilégient l’ouverture multiple et la navigation l’ouverture unique. L’anatomie figée décrite plus haut doit s’adapter à l’usage, parce que l’intention de l’utilisateur change.

Sur les pages de FAQ, les questions sont indépendantes et les internautes comparent souvent deux réponses. L’ouverture multiple est généralement recommandée pour la plupart des pages de FAQ parce qu’elle permet de garder ouvertes les réponses de référence, ce qui évite la frustration de devoir les rouvrir. Chaque panneau doit contenir une seule réponse autonome (des paragraphes courts et des liens plutôt que de longs développements), ce qui garde aussi chaque réponse facile à parcourir, sous forme de contenu adapté aux LLM.

Les autres usages demandent un contrôle plus strict. Les comparatifs de tarifs ou d’offres ne doivent pas enterrer les facteurs de différenciation dans des panneaux repliés ; si vous y utilisez un accordéon, gardez les différences clés visibles et ne repliez que les détails de fonctionnalités secondaires. Les fiches techniques produit se prêtent à une ouverture multiple groupée, où chaque panneau contient des données tabulaires denses comme des dimensions ou des listes de compatibilité. La navigation et les filtres de barre latérale, c’est l’inverse : l’ouverture unique empêche la page de s’allonger sans fin et aide l’utilisateur à savoir où il se trouve.

Que vous choisissiez l’ouverture multiple pour une FAQ ou l’ouverture unique pour une barre latérale, la question suivante est de savoir si le motif reste utilisable au clavier et avec un lecteur d’écran, dans l’une comme dans l’autre configuration.

Exigences d’accessibilité : ARIA, clavier et gestion du focus

Comment rendre accessible un template design accordéon ? Le guide W3C ARIA Authoring Practices exige un véritable élément button pour chaque en-tête, avec aria-expanded qui reflète l’état d’ouverture et aria-controls qui pointe vers son panneau, le tout activable par Entrée ou Espace après navigation au Tab.

Selon le pattern Accordion, le titre de chaque en-tête d’accordéon est contenu dans un élément ayant le rôle button, et chaque button d’en-tête est enveloppé dans un élément ayant le rôle heading doté d’un aria-level approprié. Le bouton est le seul élément à l’intérieur du heading.

Côté état, le bouton d’en-tête expose explicitement la relation et l’état : lorsque le panneau est visible, aria-expanded vaut true ; lorsqu’il ne l’est pas, il vaut false, et le bouton porte un aria-controls pointant vers l’ID du contenu du panneau. En option, chaque conteneur de panneau peut recevoir le rôle region et un aria-labelledby référençant le bouton qui le contrôle, ce qui aide les utilisateurs de lecteurs d’écran lorsque les panneaux contiennent des titres ou des accordéons imbriqués.

Le comportement clavier du modèle accordéon de l’APG est volontairement simple : Enter ou Space bascule l’en-tête qui a le focus, en dépliant un panneau replié et en repliant un panneau déplié lorsque l’implémentation l’autorise, tandis que Tab déplace le focus vers l’élément focusable suivant et Shift + Tab vers le précédent, tous les éléments focusables de l’accordéon étant inclus dans l’ordre de tabulation de la page. Contrairement aux onglets, l’accordéon de l’APG n’exige pas de navigation aux flèches. La gestion du focus doit conserver le focus sur le bouton d’en-tête après le basculement, sans sauter dans le panneau, et les panneaux repliés doivent être réellement masqués afin que les éléments focusables qu’ils contiennent ne soient pas atteignables.

Un div stylé doté d’un gestionnaire de clic n’est pas un déclencheur d’accordéon accessible. Sans véritable élément button ni aria-expanded, les utilisateurs au clavier et de lecteurs d’écran ne peuvent pas s’en servir.

Créer un accordéon dans Webflow sans code personnalisé

Créer un template design accordéon dans Webflow ne nécessite ni JavaScript personnalisé ni script tiers : l’élément Dropdown natif de Webflow, associé au panneau Interactions, suffit à gérer le dépliement et le repli.

L’erreur courante consiste à construire chaque ligne à la main à partir de simples div et à attacher une interaction Click générique à un div stylé. On perd ainsi le focus clavier natif et on multiplie les styles ponctuels. Le guide officiel de Webflow recommande de partir de l’élément Dropdown, car il ouvre déjà la liste déroulante au clic et se referme lorsque l’on clique ailleurs sur la page.

Structure basée sur les classes

• Conteneur : attribuez au Dropdown parent une classe réutilisable comme Accordion item et réglez sa largeur (Width) pour qu’elle remplisse le parent.
• Déclencheur : stylez le Dropdown Toggle avec sa propre classe, par exemple Accordion toggle, réglez Display sur flexbox et Align sur center, puis donnez-lui une hauteur fixe adaptée à votre contenu.
• Panneau : ouvrez les paramètres du Dropdown, affichez le menu avec Show, sélectionnez la Dropdown List, réglez Position sur static pour que le contenu pousse la page au lieu de la recouvrir, puis réglez Overflow sur hidden sur le parent.

Interaction sans code

Dans le panneau Interactions, créez un déclencheur d’élément : Dropdown opens > Start an animation > Timed animations. Ajoutez un état initial où la hauteur du parent (Size Height) est égale à la hauteur repliée du toggle et où l’icône ne subit aucune rotation sur l’axe z. À l’ouverture, animez Size Height vers auto et faites pivoter l’icône pour qu’elle pointe dans la direction opposée. Créez une animation Menu closes correspondante, qui ramène la hauteur et la rotation de l’icône à leurs valeurs initiales.

Convertissez l’élément terminé en Component (anciennement Symbols) afin de pouvoir réutiliser le même modèle dans vos sections FAQ, vos fiches techniques ou vos comparatifs tarifaires, sans refaire les styles ni les interactions à chaque fois.

Reste un choix structurel à trancher : faut-il vraiment utiliser un accordéon sur une page donnée ?

Quand un accordéon nuit plus qu’il n’aide

Un template design accordéon échoue lorsqu’il masque du contenu que les utilisateurs doivent comparer d’un coup d’œil, et la règle WCAG 2.5.5 impose une taille de cible minimale pour les éléments interactifs, afin que les déclencheurs restent utilisables au toucher comme au pointeur. Toutes les configurations et méthodes de construction vues jusqu’ici supposent que l’accordéon est le bon choix, et cette hypothèse mérite d’être examinée.

Les panneaux repliés sont invisibles par défaut. Cela nuit à la lecture en diagonale et réduit l’engagement avec vos facteurs de différenciation, vos détails tarifaires ou les caractéristiques décisives que les acheteurs s’attendent à parcourir côte à côte. Sur mobile, des piles denses de petits déclencheurs génèrent en plus des erreurs de tap et des efforts supplémentaires.

Côté référencement, un contenu présent dans le DOM HTML peut être exploré même lorsqu’il est replié, mais l’observation du secteur montre qu’il pèse parfois moins lourd que le texte immédiatement visible sur les termes principaux, et les implémentations qui n’injectent le contenu qu’après un clic peuvent être totalement ignorées. Ne placez jamais votre unique texte critique pour le classement exclusivement dans un panneau replié.

Utilisez un accordéon lorsque :

• Le contenu est complémentaire, long ou autonome, comme des FAQ ou des mentions annexes
• Les utilisateurs arrivent avec une question précise, et non avec une tâche de comparaison
• Vous pouvez garder des déclencheurs assez grands pour respecter la taille de cible minimale WCAG, et des panneaux courts

Laissez le contenu entièrement visible, ou passez à des onglets ou à une divulgation progressive, lorsque la tâche relève de la comparaison, lorsque l’information est décisive pour la conversion, ou lorsque la portée mobile est critique. Des accordéons de FAQ structurés et bien libellés, construits avec la même rigueur, produisent aussi ce balisage propre et explorable que les humains comme les moteurs de recherche peuvent analyser et citer.