La plupart des équipes Webflow pensent qu’un accordéon Webflow exige du JavaScript personnalisé ou une timeline d’Interactions complexe, alors que Webflow propose en réalité trois approches no-code : un Dropdown natif détourné en accordéon, un élément HTML personnalisé
Pour la plupart des équipes qui doivent livrer rapidement des FAQ, des listes de fonctionnalités et des contenus repliables, le Dropdown natif détourné est la méthode la plus rapide : il embarque nativement l’état ouvert/fermé et son style, et ne demande aucune structure supplémentaire.
Dans Webflow, un accordéon est simplement une liste d’en-têtes qui se déplient pour révéler du contenu masqué : il sert à garder des réponses longues, des détails de tarification et des explications de fonctionnalités faciles à parcourir, sans allonger la page.
La méthode details/summary est l’option HTML sémantique la plus légère, tandis que la méthode blocs Div + Interactions vous donne un contrôle total sur la mise en page et l’animation, au prix d’une configuration bien plus manuelle.
La différence se joue sur le comportement au clavier, le contrôle de l’animation et le temps de construction : comparer les trois méthodes selon des critères identiques est donc la façon la plus intelligente de choisir avant de vous lancer.
Un accordéon dans Webflow doit malgré tout respecter l’exigence des WAI-ARIA Authoring Practices : les en-têtes doivent utiliser un élément portant le rôle button, avec aria-expanded défini sur true quand le panneau est visible et sur false quand il est masqué, et les touches Entrée ou Espace doivent ouvrir et fermer les panneaux, tandis que Tab déplace le focus vers l’élément focusable suivant. L’implémentation de Webflow s’appuie quant à elle sur l’élément Dropdown, qui ouvre la liste déroulante au clic et la referme lorsque l’on clique ailleurs sur la page, comme l’explique son guide sur l’accordéon personnalisé.
Maintenant que les trois méthodes sont posées, cette section les compare face à face sur les critères qui décident réellement de votre choix : le travail nécessaire à la construction, l’accessibilité obtenue d’emblée, le comportement de l’animation et la marge de manœuvre côté design.
| Méthode | Effort de configuration | Accessibilité (clavier/lecteur d’écran) | Fluidité de l’animation | Flexibilité de design | Idéal pour |
|---|---|---|---|---|---|
| Dropdown détourné en accordéon | — | Partielle - toggle focusable, mais ni aria-expanded ni aria-controls sans attributs personnalisés | Bonne - animation Size de la hauteur, d’une valeur fixe en px vers auto via les Interactions ; peut provoquer un décalage de mise en page si le timing est mal réglé | Moyenne à élevée - styles Webflow, rotation de l’icône, mais dépendante de la structure Dropdown | FAQ rapides et contenus repliables marketing, quand la vitesse prime |
| Élément personnalisé details/summary | Faible - un seul Embed ou élément personnalisé, aucune Interaction nécessaire | Élevée d’emblée - sémantique native, le navigateur gère l’état déplié et le clavier | Instantanée par défaut - une animation de hauteur fluide exige des contournements CSS | Faible à moyenne - stylisation du marqueur limitée, plus difficile à aligner totalement sur votre identité de marque | FAQ simples et accessibles, documentation, contenus soumis à des exigences de conformité |
| Blocs Div + Interactions | Élevé - construction manuelle du déclencheur, du panneau, des états initiaux et des animations d’ouverture et de fermeture | Nulle d’emblée - vous devez ajouter le rôle button, aria-expanded, aria-controls et la gestion des touches Entrée/Espace conformément aux WAI-ARIA | Contrôle maximal - possibilité d’enchaîner hauteur auto, opacité et rotation ; la gestion de la hauteur auto reste délicate | Maximale - n’importe quelle mise en page, éléments imbriqués, liberté totale sur le design system | Accordéons au design sur mesure, quand le contrôle visuel compte plus que le travail supplémentaire |
Le détournement du Dropdown demande le moins d’effort de configuration, car le comportement d’ouverture et de fermeture existe sans la moindre ligne de code ; il reste toutefois à modifier les styles par défaut pour qu’il se comporte comme un accordéon. Le guide indique précisément de passer la Position de la Dropdown List sur static, afin que le contenu environnant lui fasse de la place au lieu d’être recouvert, et de créer une animation Size qui règle la hauteur sur auto, en cohérence avec la hauteur du toggle.
L’approche details/summary inverse le compromis. Vous obtenez la sémantique native et la gestion du clavier directement du navigateur, sans câblage ARIA, ce qui rejoint la recommandation du W3C de maximiser le HTML sémantique, mais vous perdez le contrôle fin de l’animation. L’ouverture native du navigateur est instantanée ; animer la hauteur de 0 à auto exige des contournements CSS ou JS supplémentaires, et la stylisation du marqueur par défaut reste limitée.
Les blocs Div associés aux Interactions vous offrent une liberté visuelle totale. Vous construisez vous-même le déclencheur, le panneau et deux animations minutées, ce qui vous permet d’animer ensemble la hauteur, l’opacité et la rotation de l’icône. Le prix à payer, c’est l’accessibilité : par défaut, un div n’a ni rôle button, ni aria-expanded, ni aria-controls, et ne gère ni Entrée ni Espace ; vous devez donc tout ajouter manuellement pour respecter le pattern d’accordéon WAI-ARIA.
Pour la plupart des FAQ et des contenus repliables, optez par défaut pour la méthode Dropdown natif, rapide et suffisamment flexible ; utilisez details/summary lorsque vous privilégiez l’accessibilité native et une maintenance minimale ; et réservez Div + Interactions aux cas où le design sur mesure compte plus que le travail d’accessibilité supplémentaire.
Les accordéons Webflow échouent toujours au même endroit : vous déposez un élément et le panneau recouvre le contenu au lieu de le pousser vers le bas. Pour corriger cela, il faut passer la Dropdown List d’Absolute à Static, régler Overflow sur Hidden et animer la Height depuis la hauteur de votre toggle jusqu’à Auto. Une fois la méthode choisie, voici exactement comment la construire, étape par étape.
C’est la démarche documentée dans le guide sur l’accordéon personnalisé de Webflow.
L'horodatage simultané et l'overflow masqué évitent le scintillement qui laisse apparaître le contenu pendant la transition de hauteur.
Une fois qu'un accordéon statique fonctionne, la question suivante est de le rendre dynamique à partir des données du CMS.
Des accordéons accessibles et sans risque pour le SEO dans Webflow exigent une utilisation au clavier et un état ARIA correct, comme aria-expanded et aria-controls ; le contenu masqué de leurs panneaux reste explorable tant qu'il demeure dans le DOM.
| Champ | Ce qu'il faut saisir | Exemple |
|---|---|---|
| ID du déclencheur | ID unique par élément CMS, basé sur le slug | faq-return-policy-trigger |
| Attributs du déclencheur | role, aria-expanded, aria-controls | role="button" aria-expanded="false" aria-controls="faq-return-policy-panel" tabindex="0" |
| ID du panneau | Doit correspondre à aria-controls | faq-return-policy-panel |
| Étiquetage du panneau | aria-labelledby pointant vers le déclencheur, rôle region facultatif | role="region" aria-labelledby="faq-return-policy-trigger" |
| Liaison CMS de la question | Champ texte simple vers le déclencheur | Quelle est votre politique de retour ? |
| Liaison CMS de la réponse | Champ rich text vers le panneau | Nous acceptons les retours sur présentation du ticket de caisse d'origine. |
Un accordéon qui fonctionne doit encore être accessible, explorable et réutilisable sur l'ensemble du contenu CMS, et pas seulement opérationnel sur le plan visuel.
La référence indépendante est le modèle d'accordéon WAI-ARIA. Il précise que le titre de chaque en-tête est contenu dans un élément doté du rôle button, lui-même encapsulé dans un élément doté du rôle heading avec un aria-level approprié. Si le panneau est visible, aria-expanded vaut true ; s'il ne l'est pas, false. Le bouton d'en-tête porte un aria-controls défini sur l'ID du contenu du panneau. Facultativement, chaque conteneur de panneau porte le rôle region et un aria-labelledby renvoyant au bouton qui le contrôle.
L'interaction clavier définie par ce modèle est simple : Entrée ou Espace déplie un panneau replié ou replie un panneau déplié, et Tab déplace le focus vers l'élément focusable suivant dans l'ordre de la page.
Ce que cela implique pour chaque méthode Webflow :
Lorsque vous masquez le contenu d'un panneau avec display:none ou height:0 plus overflow:hidden, le balisage reste présent dans le code source de la page : les robots peuvent donc le découvrir. Les problèmes commencent lorsque vous retirez complètement le contenu du DOM ou que vous chargez les réponses uniquement après un clic, via un fetch JavaScript. Conservez le texte des questions sous forme de vrai texte dans un bouton ou un titre, gardez les réponses dans le HTML initial et ne comptez pas sur des images de fond pour le texte. Une fois le composant accessible, c'est le texte explicatif qui l'entoure qui aide la page à obtenir des citations, comme l'explique ce guide pour être cité dans les réponses IA sans budget d'entreprise.
Créez une Collection CMS avec Question en texte simple et Answer en rich text. Ajoutez une Collection List à votre page FAQ et connectez-la à cette Collection. Dans un seul Collection Item, construisez une unique ligne d'accordéon. Liez le champ Question au texte du bouton d'en-tête et le champ Answer au panneau. Attribuez à chaque paire un ID unique basé sur le slug de l'élément, par exemple faq-return-policy-trigger et faq-return-policy-panel, afin que aria-controls reste valide lorsque Webflow répète la ligne pour chaque élément. Définissez aria-expanded sur false au départ et contrôlez la visibilité avec du CSS plutôt qu'en supprimant des nœuds.
Utilisez ce modèle pour garder des attributs cohérents :
| Champ | Ce qu'il faut saisir | Exemple |
|---|---|---|
| ID du déclencheur | ID unique par élément CMS, basé sur le slug | faq-return-policy-trigger |
| Attributs du déclencheur | role, aria-expanded, aria-controls | role="button" aria-expanded="false" aria-controls="faq-return-policy-panel" tabindex="0" |
| ID du panneau | Doit correspondre à aria-controls | faq-return-policy-panel |
| Étiquetage du panneau | aria-labelledby pointant vers le déclencheur, rôle region facultatif | role="region" aria-labelledby="faq-return-policy-trigger" |
| Liaison CMS de la question | Champ texte simple vers le déclencheur | Quelle est votre politique de retour ? |
| Liaison CMS de la réponse | Champ rich text vers le panneau | Nous acceptons les retours sur présentation du ticket de caisse d'origine. Contactez le support pour en savoir plus. |
Attention : un accordéon construit uniquement avec des Interactions sur des Div blocks n'est pas accessible au clavier ni aux lecteurs d'écran par défaut. Vous devez ajouter manuellement role="button", tabindex="0", aria-expanded et aria-controls, puis mettre à jour aria-expanded à chaque bascule.
Des utilisateurs du forum Webflow ont corrigé des sections FAQ en accordéon qui se chevauchaient en passant la Dropdown List Position sur Static et en définissant l'Overflow du parent sur Hidden : le bug de chevauchement classique des constructions d'accordéon Webflow.
HarperFlow publie des articles hautement structurés comprenant des FAQ, des tableaux de données et des blocs de réponse directe, qui répondent aux exigences de citation strictes des moteurs de recherche IA. En auditant et en améliorant votre contenu en continu grâce à l'analyse des réponses IA, HarperFlow aide votre site à bâtir une autorité et une visibilité durables, qui survivent aux stratégies dépendantes de la publicité.
Le construire correctement vous amène presque au bout du chemin, mais c'est en confirmant qu'il se comporte réellement comme prévu que vous bouclez la boucle.
Effectuez ces quatre vérifications avant de mettre en ligne :
1. Saut d'animation de la hauteur Ouvrez les DevTools, dépliez chaque panneau et observez la page derrière lui. Si le contenu situé en dessous saute ou clignote, c'est que le conteneur de votre réponse anime height:auto sans Overflow Hidden. Définissez l'Overflow de la div de réponse sur Hidden et animez max-height, ou utilisez l'état d'ouverture/fermeture natif de Webflow plutôt que de forcer height:auto.
2. Chevauchement dû à une position non réinitialisée C'est le bug d'accordéon Webflow le plus souvent signalé. Sélectionnez l'élément Dropdown List, allez dans Style > Position, réglez-la sur Static, puis sélectionnez le Dropdown parent et passez Overflow sur Hidden. Publiez et rechargez : les panneaux repliés ne devraient plus se superposer.
3. Clavier et état Naviguez avec la touche Tab, au clavier uniquement. Chaque déclencheur doit recevoir le focus, Entrée/Espace doit l'ouvrir, et la valeur aria-expanded doit passer de false à true dans l'inspecteur. Si le focus saute un élément ou si aria-expanded ne change jamais, votre interaction ne gère que le clic, pas le clavier.
4. Zones tactiles sur mobile Sur un téléphone ou en aperçu responsive, essayez d'appuyer sur les déclencheurs avec le pouce. Les déclencheurs plus petits que ce que préconisent les recommandations du W3C sur la taille des cibles donnent l'impression qu'on va les rater et échouent au critère AAA, qui exige au moins 44 par 44 pixels CSS. Donnez au bouton déclencheur une hauteur minimale de 44px et un padding suffisant, pas seulement du texte à la taille d'une icône.
Si vous voulez une FAQ opérationnelle en ligne dès aujourd'hui, optez par défaut pour la méthode la plus rapide et la plus fiable du comparatif (le Dropdown natif détourné en accordéon) et ne passez à une construction Div + Interactions que lorsque vous avez besoin d'un contrôle précis de l'animation ou de la mise en page que le Dropdown ne peut pas offrir.
Une fois ce type de composant bien construit, ce qui renforce durablement la visibilité d'un site Webflow, c'est de garder les articles qui l'entourent à jour, structurés et faciles à citer. Pour les équipes qui ne veulent pas assurer cet entretien à la main, HarperFlow automatise cette couche de publication sur Webflow, sans transformer votre blog en séance de prompts.
Le chevauchement se produit lorsque la Dropdown List est encore sur sa position absolute par défaut. Sélectionnez la Dropdown List et réglez Position sur static, puis passez l'Overflow du Dropdown parent sur hidden afin que le contenu environnant laisse la place à l'ouverture, comme le montre le guide Webflow sur l'accordéon personnalisé.
Le Dropdown natif se ferme quand on clique ailleurs sur la page, mais il ne ferme pas automatiquement les panneaux voisins de la même liste. Pour obtenir un comportement à un seul panneau ouvert, il vous faut une Interaction supplémentaire qui ferme les autres panneaux au clic. La méthode Divs + Interactions vous donne le plus de contrôle sur cette logique.
Donnez à chaque en-tête role="button", aria-expanded="false" qui bascule sur true quand le panneau est visible, et aria-controls pointant vers l'ID de son panneau, conformément au modèle d'accordéon WAI-ARIA. Vous pouvez aussi ajouter role="region" et aria-labelledby sur le panneau pour pointer vers l'en-tête. Vous devez également brancher les gestionnaires clavier pour Enter et Space.
Oui : si la réponse reste dans le DOM et qu'elle est masquée par la hauteur, overflow:hidden ou display, les robots d'exploration peuvent toujours la découvrir. Les problèmes commencent quand vous retirez des nœuds du DOM ou que vous chargez les réponses uniquement après un clic, via fetch. Gardez le texte des questions et des réponses dans le HTML initial.
Créez un champ Question en texte simple et un champ Réponse en texte enrichi, puis générez des ID uniques à partir du slug, par exemple faq-return-policy-trigger et faq-return-policy-panel. Liez l'aria-controls du déclencheur à l'ID du panneau correspondant et gardez cet ID synchronisé. Faites démarrer chaque déclencheur avec aria-expanded="false" et masquez en CSS plutôt qu'en supprimant des nœuds.
Par défaut, le navigateur ouvre details instantanément, sans transition. Animer la hauteur de 0 à auto impose des contournements CSS comme max-height ou l'animation de grille, ce qui alourdit la maintenance. Utilisez les méthodes Dropdown ou Div + Interactions si vous avez besoin de combiner hauteur, opacité et rotation d'icône avec un minutage précis.
Le scintillement vient généralement d'une animation vers auto alors que l'overflow est visible. Passez l'Overflow du Dropdown parent sur hidden et exécutez Size height auto et la rotation de l'icône au même horodatage. Faire correspondre la hauteur de l'état initial à celle de votre toggle, par exemple 80px, garde la transition stable.
Suivez le modèle dans lequel chaque en-tête peut recevoir le focus, Enter ou Space ouvre ou ferme un panneau, et Tab passe à l'élément focusable suivant. L'élément details/summary assure cela nativement. La méthode Dropdown donne bien le focus mais demande des tests ARIA, et les divs seules nécessitent tabindex="0" et des gestionnaires de touches écrits à la main.
