Accordéon : règles de divulgation progressive et exemples

Un accordéon est un ensemble groupé de contrôles de divulgation étiquetés qui permet à un lecteur de révéler ou de replier du contenu de support sur place. Utilisez-le pour des détails de référence facultatifs, pas pour la réponse principale de la page.

Cette paire rendue illustre la divulgation progressive : les étiquettes restent scrutables, un panneau est ouvert, et les deux réponses sont présentes dans le HTML de la page, que le visiteur interagisse ou non.

Pourquoi cet élément est important

La divulgation progressive consiste à montrer les informations nécessaires à la décision en cours tout en gardant les détails plus approfondis ou moins courants disponibles à la demande. Elle est utile lorsqu’une page sert des lecteurs de différents niveaux de connaissance. Un client régulier peut parcourir les notes d’implémentation ; un nouvel utilisateur peut les ouvrir. Le contrôle réduit la densité visuelle sans supprimer de contenu ni forcer chaque lecteur à parcourir chaque exception.

Cette même commodité peut devenir un cache. Un lecteur qui cherche une réponse directe, atterrit sur la page et voit huit étiquettes fermées doit deviner quel panneau la contient et effectuer une action supplémentaire. Sur mobile, l’ouverture et la fermeture répétées déplacent également le contenu dans la zone d’affichage. L’accordéon mérite donc sa place uniquement lorsque la plupart des lecteurs peuvent accomplir leur tâche principale sans ouvrir chaque panneau.

L’extractibilité automatique ajoute un test plus strict. L’extractibilité est la capacité des moteurs de recherche, des systèmes de réponse IA, des analyseurs et des outils d’assistance à recevoir le texte et à préserver sa relation avec son étiquette. Chaque réponse doit être présente dans le modèle objet de document (DOM) initial rendu côté serveur, la représentation structurée de la page par le navigateur. Le CSS peut réduire visuellement un panneau présent ; JavaScript ne doit pas récupérer ou fabriquer la réponse uniquement après un clic. Un robot peut ne jamais cliquer, exécuter le code client ou attendre une requête secondaire.

Suivez les règles d’écriture des éléments avant d’utiliser ce modèle. Si l’objectif du contenu correspond à un élément typé plus spécifique, cet élément prime. Un accordéon peut contenir du contenu de support autorisé, mais il ne doit pas renommer ou aplatir un avertissement, une comparaison, une définition ou une séquence d’étapes simplement pour raccourcir la page.

Quand l’utiliser

Utilisez un accordéon lorsque les quatre conditions sont réunies :

1. Le lecteur peut prédire le contenu du panneau à partir de son étiquette.
2. Le contenu est utile à un sous-ensemble de lecteurs plutôt que nécessaire à tous.
3. Tout le contenu des panneaux est livré dans le HTML initial et reste accessible sans dispositif de pointage.
4. Le repli améliore sensiblement la lecture sur la zone d’affichage attendue.

Les bons candidats incluent les détails de compatibilité facultatifs, les branches d’erreur rares, les définitions de support, les clauses politiques secondaires, les exceptions d’expédition et les réponses de référence regroupées. Un accordéon peut également fonctionner pour une grande collection de FAQ lorsque chaque question reste visible et que chaque réponse est autonome.

Les quasi-échecs révèlent les utilisations abusives les plus courantes :

• Une page courte avec deux sections brèves : des titres et paragraphes visibles sont plus rapides à parcourir que deux contrôles.
• Un long article rendu plus court : replier dix sections substantielles réduit la hauteur perçue mais augmente l’interaction et cache l’ampleur de la page.
• Les informations produit principales : prix, disponibilité, limitations matérielles, conditions d’annulation et spécifications de base influencent la décision et ne doivent pas dépendre d’une expansion.
• Une procédure séquentielle : les étapes nécessitent un ordre et un contexte. Un panneau fermé peut faire sauter une condition préalable ou exécuter des étapes dans le désordre.
• Une comparaison : les lecteurs ont besoin d’une visibilité simultanée sur les mêmes critères. Des panneaux séparés imposent une comparaison par mémorisation.
• Un avertissement de sécurité ou une condition juridique : la conséquence de le manquer est plus élevée que l’avantage visuel de le cacher.
• Un substitut de navigation : un accordéon n’est pas une table des matières. Il révèle le contenu au même endroit plutôt que de se déplacer vers des sections stables de la page.

En cas de doute, publiez le contenu visiblement. Un défilement supplémentaire est généralement récupérable ; une réponse manquée, une contrainte non divulguée ou un nœud DOM indisponible ne l’est pas.

Où le placer

Placez l’accordéon après que la page a fourni sa réponse directe et suffisamment d’explications visibles pour que le lecteur comprenne ce que contient le groupe. Introduisez-le avec un H2 et une phrase de cadrage. Le groupe se comporte ensuite comme une couche de référence supplémentaire au sein de cette section.

Règles de positionnement exact :

• Placez-le après l’explication visible qu’il qualifie, jamais entre une affirmation et la preuve qui la soutient.
• Gardez-le dans la section parente dont le sujet étiquette chaque élément. Si les étiquettes n’ont de sens qu’avec un titre manquant, le groupe est mal placé.
• Placez un accordéon de détails produit après la valeur fondamentale, le contexte de prix et les conditions d’achat ; placez les branches de dépannage après le diagnostic partagé et la première vérification la plus sûre.
• Gardez un accordéon FAQ de clôture après la conclusion principale et avant la prochaine action finale, à condition qu’il réponde à des questions résiduelles plutôt que répétées.
• Donnez au groupe une ancre de section stable lorsque les lecteurs peuvent y créer un lien. Les liens individuels vers les panneaux sont facultatifs, mais s’ils sont fournis, ils doivent ouvrir et cibler le bon élément.

Un accordéon ne peut pas se trouver directement à côté d’onglets, d’un second accordéon ou d’un tableau comparatif dense. Des modèles d’interaction adjacents obligent les lecteurs à choisir un mécanisme avant de pouvoir choisir un contenu. Il ne peut pas interrompre des étapes ordonnées, séparer un avertissement de sa conséquence, ni se situer entre un prix produit et les conditions qui le régissent. Ne placez pas de bannière promotionnelle à l’intérieur du groupe ou immédiatement après chaque panneau ; la promotion entre en conflit avec la tâche de référence et donne l’impression que l’expansion est un piège commercial.

Anatomie

L’anatomie étiquetée comprend sept parties :

1. Titre du groupe : nomme le sujet partagé dans la hiérarchie du document environnant.
2. Étiquette de l’élément : prédit le contenu spécifique sans étiquettes vagues comme « En savoir plus ».
3. Contrôle de divulgation : un summary natif ou un bouton qui reçoit le focus clavier et active/désactive un panneau.
4. Indicateur d’état : communique visuellement l’état ouvert ou fermé tandis que l’état programmatique est exposé via la sémantique native ou aria-expanded.
5. Panneau : contient la réponse ou le détail de référence et reste dans le DOM initial.
6. Relation de contrôle : la sémantique native <details>/<summary> ou aria-controls avec des ID correspondants associe chaque contrôle à exactement un panneau.
7. Limite d’élément : l’espacement, la bordure et le regroupement DOM empêchent qu’une étiquette semble contrôler une réponse voisine.

Le chevron visible est décoratif. Cachez-le aux technologies d’assistance car l’état développé fournit déjà la signification. La rotation seule ne peut pas communiquer l’état ; la sémantique du contrôle doit le faire.

Exemples de conception

Chaque variante utilise les mêmes champs et la même règle de présence dans le DOM. Choisissez la variante en fonction de la tâche de lecture, pas de la décoration.

Groupe standard à ouverture unique

L’ouverture d’un élément ferme l’élément précédemment ouvert. Utilisez ceci lorsque les panneaux sont des alternatives et que les lecteurs n’ont normalement besoin que d’un à la fois, comme des symptômes de dépannage mutuellement exclusifs.

Groupe de référence multi-ouvert

Les lecteurs peuvent garder plusieurs panneaux ouverts. Utilisez ceci lorsqu’ils peuvent comparer ou combiner des détails supplémentaires, comme les types de fichiers pris en charge et les permissions de compte. Si la comparaison simultanée est la tâche principale, utilisez plutôt un tableau visible.

Orientation ouverte par défaut

Ouvrez le premier élément ou l’élément le plus courant au chargement initial lorsqu’il illustre le modèle de contenu et fournit une orientation utile. N’ouvrez jamais plus d’un élément simplement pour remplir l’espace.

Variante FAQ compacte

Utilisez des étiquettes de questions et des réponses autonomes concises. L’interaction ne justifie pas en soi les données structurées ; le schéma dépend du type de contenu et des enregistrements visibles exacts.

État de stress pour contenu long

Un panneau avec plus de deux courts paragraphes signale que le contenu mérite peut-être une section visible. La variante de stress existe pour tester le retour à la ligne, les liens, les listes, le focus et le flux responsive, pas comme cible éditoriale normale.

Paramètres

Le contrat sépare le comportement du groupe du contenu des éléments afin que chaque plateforme puisse préserver les mêmes étiquettes, états et relations.

Le premier titre parent correspond à heading. Le premier titre de chaque élément imbriqué correspond à label, et tout ce qui le suit correspond au content de cet élément. Il s’agit d’un mappage explicite d’éléments imbriqués, cohérent avec la base de précédence et les règles du corps. open=true définit uniquement la présentation initiale ; il ne change pas l’importance du contenu. Lorsque linkable=true, la navigation vers un fragment d’élément doit le développer, déplacer le focus de manière prévisible et laisser le titre visible sous tout en-tête collant.

Syntaxe et exemples de code

Les trois notations représentent un seul groupe canonique. Elles peuvent utiliser différentes classes d’encapsulation, mais doivent préserver le contenu dans le HTML initial, l’ordre source, les noms accessibles et l’état.

Directive Markdown portable

:::accordion{mode=multiple linkable=true}
## Export details

::item{id="included-fields" open=true}
### Which fields are included?

The export contains the fields currently available to your account and report scope.
::

::item{id="filter-behavior"}
### Do filters affect the export?

Yes. Confirm the active date range, market, and status filters before creating the file.
::
:::

Code court Hugo

{{< accordion heading="Export details" mode="multiple" linkable="true" >}}
{{< accordion-item id="included-fields" label="Which fields are included?" open="true" >}}
The export contains the fields currently available to your account and report scope.
{{< /accordion-item >}}
{{< accordion-item id="filter-behavior" label="Do filters affect the export?" >}}
Yes. Confirm the active date range, market, and status filters before creating the file.
{{< /accordion-item >}}
{{< /accordion >}}

Ceci est la spécification de l’adaptateur Hugo. Un dépôt ne la satisfait pas en ajoutant des classes à des titres arbitraires ; il nécessite un moteur de rendu qui produit du HTML de divulgation natif ou une relation équivalente bouton-panneau.

Bloc WordPress

<!-- wp:amicited/accordion {"heading":"Export details","mode":"multiple","linkable":true} -->
<!-- wp:amicited/accordion-item {"id":"included-fields","label":"Which fields are included?","open":true} -->
<p>The export contains the fields currently available to your account and report scope.</p>
<!-- /wp:amicited/accordion-item -->
<!-- wp:amicited/accordion-item {"id":"filter-behavior","label":"Do filters affect the export?"} -->
<p>Yes. Confirm the active date range, market, and status filters before creating the file.</p>
<!-- /wp:amicited/accordion-item -->
<!-- /wp:amicited/accordion -->

Le bloc WordPress enregistré stocke les champs canoniques plutôt que de s’appuyer sur un groupe visuel de blocs Details non liés. Son rendu serveur doit émettre chaque réponse avant toute interaction.

Exemples

Bon exemple

Détails de suppression de compte apparaît après une explication visible de ce que fait la suppression et un avertissement visible qu’elle est irréversible. Ses trois étiquettes sont « Que deviennent les exportations planifiées ? », « Combien de temps une archive demandée reste-t-elle disponible ? », et « Un autre administrateur peut-il annuler la demande ? ». Chaque panneau contient une branche facultative, toutes les réponses sont en HTML et le focus clavier est visible.

Cela fonctionne parce que la conséquence principale et l’action requise restent visibles. L’accordéon contient des questions secondaires qui s’appliquent à différents lecteurs, et chaque étiquette permet au lecteur de prédire si l’ouverture en vaut la peine.

Mauvais exemple

Choisissez votre forfait contient des panneaux fermés intitulés « Démarrage », « Équipe » et « Entreprise ». Le prix, les limites d’utilisation, la durée du contrat, les conditions d’annulation et la disponibilité sont à l’intérieur des panneaux. Un seul forfait peut être ouvert à la fois.

Cela échoue car les critères d’achat nécessitent une visibilité côte à côte. Le lecteur doit ouvrir les panneaux à plusieurs reprises et mémoriser les informations, tandis qu’un extracteur non interactif peut manquer les prix chargés par le client. Remplacez-le par un tableau de prix ou de spécifications visible et réservez la divulgation pour les détails facultatifs tels que les formats de facture ou les règles d’éligibilité rares.

Balisage de schéma et accessibilité

L’accordéon n’a pas de type Schema.org dédié. L’interaction n’alimente aucune donnée structurée par sa seule existence. Si ses enregistrements sont de véritables questions et réponses, le contrat de contenu FAQ peut alimenter FAQPage ; si le groupe contient des détails produit, des politiques ou des notes de dépannage, utilisez uniquement le schéma justifié par la page et le contenu. Le texte visible et toute représentation structurée doivent correspondre.

Préférez les <details> et <summary> natifs pour les divulgations simples car le navigateur fournit le fonctionnement au clavier et la sémantique d’état. Lorsque la conception ou le comportement d’ouverture unique nécessite une implémentation personnalisée, chaque contrôle doit être un bouton, exposer aria-expanded="true" ou "false", référencer son panneau avec aria-controls, et avoir un ID unique que le panneau peut référencer avec aria-labelledby. Ne placez pas le contrôle sur un div avec un gestionnaire de clic.

Les touches Entrée ou Espace doivent actionner le contrôle ciblé. Tab se déplace à travers les contrôles et le contenu interactif dans le panneau ouvert ; le focus ne doit pas entrer dans le contenu fermé. L’ouverture ou la fermeture d’un panneau laisse normalement le focus sur son contrôle. La navigation par touches fléchées entre les en-têtes est facultative, mais si elle est implémentée, elle ne doit pas remplacer le comportement normal de Tab.

Conservez toutes les étiquettes dans l’arbre d’accessibilité et toutes les réponses dans le HTML source. Un panneau visuellement fermé peut utiliser un comportement de divulgation natif ou un état masqué pris en charge, mais son contenu doit devenir disponible lors de l’expansion sans seconde récupération. L’état réduit ne doit pas provoquer de contenu dupliqué via des copies distinctes pour bureau et mobile. Testez à 200 % de zoom, avec des étiquettes longues, uniquement au clavier, en mouvement réduit et avec un lecteur d’écran. Animez la hauteur ou la rotation de l’icône uniquement lorsque le mouvement peut être supprimé et que le contenu n’est pas retardé.

Règles d’écriture

L’étiquette porte le coût de l’interaction, elle doit donc faire une promesse précise. Écrivez 3 à 14 mots et généralement pas plus de 120 caractères. Utilisez une question directe pour le contenu FAQ et une phrase nominale descriptive pour le contenu de référence. Évitez « Plus », « Détails », « Lisez ceci » et les étiquettes qui ne diffèrent que par un chiffre.

Utilisez 3 à 8 éléments par groupe. Chaque panneau doit normalement contenir 20 à 120 mots et pas plus de 250. Deux panneaux courts sont plus clairs en texte ouvert ; neuf ou plus nécessitent un regroupement, une navigation visible ou une consolidation éditoriale. Gardez les étiquettes grammaticalement parallèles et organisez les éléments par tâche du lecteur, fréquence attendue ou une séquence réelle de catégories — pas alphabétiquement sauf si la recherche est véritablement alphabétique.

Le ton du panneau est direct, autonome et factuel. Énoncez la réponse dans la première phrase car le lecteur a déjà payé un coût d’interaction. Définissez tout terme nécessaire dans le panneau ou dans le texte visible immédiatement avant le groupe. Ne commencez pas par des phrases d’introduction vagues comme « Il y a plusieurs choses à considérer. »

Ne mettez jamais uniquement ce qui suit dans un accordéon :

• la réponse directe de la page ou sa proposition de valeur unique ;
• les avertissements de sécurité, contre-indications, obligations légales ou conséquences irréversibles ;
• le prix, la disponibilité, les limites matérielles du produit ou les conditions d’achat requises ;
• les étapes ordonnées, les prérequis ou une vérification d’achèvement ;
• les preuves nécessaires pour étayer l’affirmation environnante ;
• une comparaison principale ou une matrice de décision ;
• les formulaires, les contrôles de paiement, le consentement ou l’appel à l’action principal de la page ;
• un autre accordéon, des onglets ou un carrousel.

Une liste compacte, un petit tableau, un lien en ligne ou une image illustrative est acceptable lorsqu’il appartient entièrement à un élément facultatif et reste utilisable sur mobile. Si un panneau a besoin de sa propre table des matières ou de plus d’un niveau de titre, placez-le dans une section visible ou une page séparée.

Types d’articles qui l’utilisent

Le tableau postTypes dans le frontmatter est la source de cette matrice d’utilisation. L’inclusion signifie que l’élément est disponible sous la condition indiquée, pas obligatoire sur chaque page de ce type.

Liste de contrôle QA

• Une réponse directe visible apparaît avant l’accordéon.
• Chaque élément est un contenu de référence facultatif, pas une information dont tous les lecteurs ont besoin.
• Le groupe contient 3 à 8 éléments avec des étiquettes précises et parallèles.
• Le texte complet de chaque panneau est présent dans le HTML initial rendu côté serveur.
• Aucune réponse ne dépend d’une requête réseau déclenchée par clic ou d’une insertion côté client uniquement.
• Les details/summary natifs ou de vrais boutons fournissent un comportement clavier correct.
• Les contrôles personnalisés exposent aria-expanded, aria-controls, des ID uniques et une étiquette de panneau associée.
• Le focus est visible, reste prévisible après basculement et ne peut pas entrer dans un panneau fermé.
• Les étiquettes longues se retournent sans coupure, chevauchement ou masquage de l’indicateur d’état.
• La mise en page fonctionne à 200 % de zoom et sur une zone d’affichage étroite sans défilement horizontal.
• Les animations respectent les préférences de mouvement réduit et ne retardent jamais l’accès au contenu.
• Les liens vers des fragments individuels, lorsqu’ils sont pris en charge, ouvrent et révèlent le panneau correct.
• Les données structurées sont basées sur la signification du contenu, pas sur l’apparence de l’accordéon.
• Les enregistrements FAQPage, s’ils sont émis, correspondent exactement au texte visible des questions et réponses.
• Aucun accordéon imbriqué, ensemble d’onglets adjacent, copie mobile répétée ou appel à l’action principal n’est présent.
• La page communique toujours sa réponse principale lorsque chaque panneau est fermé.

Questions fréquemment posées

Le frontmatter stocke les enregistrements FAQ canoniques pour cette page. Leurs réponses renforcent la limite d’implémentation : le contenu peut être visuellement réduit, mais il reste présent, accessible et secondaire par rapport à la réponse visible.