À quoi ressemble le bloc accordéon de WP 6.9 ?
Petite mise en abîme ici, puisque pour vous montrer à quoi ressemble ce nouveau bloc accordéon, autant l’utiliser directement !
Les sections qui suivent montrent le rendu par défaut du bloc accordéon. La section d’après montre quant à elle un exemple de bloc accordéon mis en forme via CSS.
Mais ce ne sont pas de faux contenus de démo. C’est tout simplement le contenu de cet article qui est rangé dans ces blocs, alors n’hésitez pas à déplier ces éléments pour en voir les contenus :-)
C’est vrai qu’il existe déjà le bloc « Détails » qui permet de générer des panneaux de contenus masqués puis dépliables au clic sur leur intitulé.
Mais un composant de type « Accordéon » est assez différent : le principe c’est que les panneaux de l’accordéon sont liés ensembles à l’intérieur d’un groupe, à l’inverse du composant « Détail » où chaque panneau est totalement indépendant des autres.
Souvent, on fera d’ailleurs en sorte que lorsqu’un élément est sélectionné, les autres sections vont se replier, ce qui donne à ce composant son aspect d’accordéon.
Oui. Des rôles ARIA ont été ajoutées à ce composant afin de standardiser le code source généré.
Le conteneur global dispose d’un rôle group et les panneaux du bloc portent un rôle region. Des attributs ARIA permettent également de faciliter l’usage de ce bloc pour les technologies d’assistance. Ainsi, le titre de section comprend des attributs aria-expanded, aria-controls se rapportant au panneau dépliable et à son état, tandis que celui-ci comprend un attribut aria-labelledby permettant de le rattacher à son titre.
On y retrouve donc finalement toutes les recommandations du motif de conception « accordion » proposé par le W3C 1.
Il est possible de définir les niveaux de titres à utiliser pour les titres de section de votre accordéon. C’est cependant un poil caché : ne cherchez pas ce réglage au niveau de chaque titre de section, il faut se positionner au niveau du bloc accordéon lui même et le réglage de niveau de titre à utiliser est disponible dans la barre de formatage du bloc :
Il est aussi possible de définir les comportements généraux du bloc :
- Le réglage « Fermer automatiquement » permet de fermer automatiquement les autres panneaux lorsque l’un des panneaux est affiché.
- Le réglage « Afficher l’icône » permet d’afficher l’icône proposée nativement (et surchargeable en CSS) dans le bouton de dépliement.
- Le réglage « Position de l’icône » permet d’afficher l’icône à droite ou à gauche du titre.
Pour pouvoir styler correctement un bloc, il est important de connaître sa structure.
Voici à quoi ressemble notre bloc accordéon lors de l’enregistrement de la page en base de données :
<!-- wp:accordion -->
<div role="group" class="wp-block-accordion">
<!-- wp:accordion-item -->
<div class="wp-block-accordion-item">
<!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading">
<button class="wp-block-accordion-heading__toggle">
<span class="wp-block-accordion-heading__toggle-title">
Un titre de section
</span>
<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
</button>
</h3>
<!-- /wp:accordion-heading -->
<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel">
<!-- wp:paragraph -->
<p>Mon texte.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:accordion-panel -->
</div>
<!-- /wp:accordion-item -->
</div>
<!-- /wp:accordion -->Si l’on décortique un peu ce code, on voit que les classes suivantes sont utilisées pour la structuration du bloc :
wp-block-accordion: le conteneur principal du blocwp-block-accordion-item: le conteneur de chaque élément de notre accordéon, puis à l’intérieur :wp-block-accordion-heading: le titre de section de l’élémentwp-block-accordion-heading__toggle: le bouton qui contient le texte du titre de sectionwp-block-accordion-heading__toggle-title: un wrapper autour du titre textuel seulwp-block-accordion-heading__toggle-icon: le wrapper autour du petit élément « + » affiché par défaut à droite du titre, afin de pouvoir le cibler et le modifier
Cette structure claire permet de cibler assez précisemment chaque item via CSS afin d’appliquer des styles personnalisés.
Dans la section suivante, nous verrons les limites actuelles de ce bloc dans la version Beta 1 de WordPress 6.9, mises en forme au sein d’un exemple de bloc accordéon stylé via CSS.
Limites actuelles du bloc Accordéon dans WP 6.9
Dans cette section, nous abordons les limites du bloc tel qu’il est prévu pour WOrdPress 6.9 dont la sortie a eu lieu le 2 décembre 2025.
Le bloc accordéon utilisé dans cette section est surchargé en CSS afin de proposer une implémentation visuelle différente du bloc, à titre d’exemple.
Si le bloc est dès aujourd’hui fonctionnel, son utilisation demande une petite montée en compétence avant de pouvoir le manier avec dextérité en back-office.
C’est globalement le cas de tous les blocs imbriqués (nested blocks) : l’insertion de blocs à l’intérieur du conteneur nécessite souvent de revenir au bloc parent avant de pouvoir insérer le contenu que l’on souhaite.
Idem lorsque l’on souhaite accéder aux réglages généraux du bloc, il faut revenir au bloc parent ce qui n’est pas spécialement évident en cliquant sur les éléments du bloc.
Pour revenir facilement au bloc parent, pensez à utiliser un maximum le fil d’ariane des blocs disponibles en pied de page de l’écran de l’éditeur. Il est très utile pour remonter dans la hiérarchie d’un ensemble de blocs imbriqués.
À noter que l’utilisation du bloc via un lecteur d’écran est presque un poil plus aisée que visuellement, car l’éditeur propose pas mal de raccourcis destinés à faciliter son usage pour les gens qui utilisent des technologies d’assistance.
Il n’est pas facilement possible de faire un lien ancre vers une section de l’accordéon qui mène vers son contenu déplié. Enfin si, c’est techniquement possible évidemment, mais cela nécessite un peu de JS pour déplier le panneau de section correspondant dans le cas où le lien contient une ancre vers l’élément de l’accordéon.
Par défaut, les ancres fonctionnent correctement puisqu’elles renvoient bien vers la section courante. Mais le panneau reste replié. Ce serait bien qu’un comportement JS natif puisse s’assurer de déplier le contenu correspondant.
C’est par exemple le cas si je fais un lien vers un critère sur le site officiel du Référentiel Général d’Amélioration de l’Accessibilité. Exemple avec un lien vers le test 9.1.1 du critère 9.1 : la section correspondante est bien dépliée automatiquement.
Pour cela, il faudra (pour l’instant) ajouter un peu de JS à votre thème !
Dans cet article, j’ai mis en œuvre un petit script qui permet de déplier le panneau s’il est ciblé dans l’URL : cliquer sur ce lien pour tester une ancre (cela rechargera la page dans un nouvel onglet et dépliera le panneau ciblé).
Voici le code JS associé :
<script>
(function() {
function highlightAndOpenAccordion() {
const previouslyHighlighted = document.querySelector('.accordion-item-highlighted');
if (previouslyHighlighted) {
previouslyHighlighted.classList.remove('accordion-item-highlighted');
}
const hash = window.location.hash;
if (!hash) return;
try {
const targetPanel = document.querySelector(hash);
if (targetPanel && targetPanel.matches('.wp-block-accordion-panel')) {
const targetSection = targetPanel.closest('.wp-block-accordion-item');
if (!targetSection) return;
targetSection.classList.add('accordion-item-highlighted');
const button = targetSection.querySelector('.wp-block-accordion-heading__toggle');
if (button) {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
if (!isExpanded) {
button.setAttribute('aria-expanded', true);
}
}
setTimeout(() => {
targetPanel.removeAttribute( 'inert' );
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 100);
}
} catch (e) {
console.warn("Anchor not found:", e);
}
}
document.addEventListener('DOMContentLoaded', highlightAndOpenAccordion);
window.addEventListener('hashchange', highlightAndOpenAccordion);
})();
</script>C’est un corrolaire du point précédent : si l’on souhaite faire un lien-ancre vers un texte situé à l’intérieur du contenu d’un panneau de notre accordéon, alors le lien est bien fonctionnel, mais si le panneau est fermé, alors on ne voit pas ce texte.
Pour illustrer ce bug, descendez en bas de cet article et cliquez sur n’importe quelle note de bas de page : vous arriverez sur une section refermée sans avoir moyen de l’ouvrir si vous utilisez par exemple la navigation clavier ou n’importe quelle technologie d’assistance. Cela est aussi gênant si vous utiliser la navigation visuelle classique bien entendu.
Le bloc Accordéon est un bloc intéressant lorsque l’on a une longue liste de questions-réponses qu’on souhaite pouvoir déplier-replier facilement. Cela permet d’avoir plus facilement une vue globale de la page lorsque les questions sont toutes repliées.
Cependant, le bloc accordéon ne contient aucun balisage sémantique, comme par exemple les schémas standards FAQpage 2 ou QApage 3 proposés sur schema.org.
Ces schémas (ou « données structurées ») ont pour objectif de proposer un balisage sémantique interprétable par les agents utilisateurs tels que les technologies d’assistance, mais ils sont plus connus pour leur capacité à aider les moteurs d’indexation à correctement interpréter votre contenu.
Google en est friand et recommande leur implémentation 4, et c’est aussi le cas des moteurs d’indexation utilisés par les IA.
Dans une optique GEO (pour Generative Engine Optimization, soit optimisation pour les moteurs d’indexation des IA génératives), les pages contenant des FAQ sont hyper importantes. C’est une évidence puisque les IA ont globalement pour objectif de répondre à des questions en langage naturel. Quoi de mieux qu’une page présentant un balisage sémantique en mode questions-réponses pour cela ?
Tout cela n’est pas prévu par le bloc natif Accordéon pour une bonne et simple raison : il s’agit d’un bloc générique qui n’a pas vocation à ajouter la moindre sémantique sur vos contenus : il doit être utilisable pour n’importe quel contenu même s’il ne s’agit pas de questions-réponses.
Il est cependant tout à fait possible d’ajouter ces données structurées au bloc Accordéon natif. Ça demande cependant un peu de développement et je propose d’en parler dans un prochain article.
Voilà, j’espère que cet article vous en aura appris un peu plus sur le fonctionnement du bloc Accordéon qui est arrivé avec WordPress 6.9.
Si vous voulez suivre les dernières étapes du développement de cette nouvelle version de WP, vous pouvez consulter le blog officiel Make/Core sur lequel nous partageons régulièrement les avancées techniques du CMS.
Notes et références
- Voir l’exemple d’implémentation du motif « accordion » sur le site « ARIA Authoring Practices Guide (APG) » du W3C ↩︎
- Voir le schéma FAQpage sur schema.org ↩︎
- Voir le schéma QApage sur schema.org ↩︎
- Voir par exemple la documentation de Google concernant la mise en place de données structurées pour les pages de FAQ ↩︎
Laisser un commentaire