Composant accordéon CSS et JavaScript : un menu accessible à réutiliser partout

Un accordéon accessible, vous l'avez peut-être déjà codé une fois. Le problème arrive au projet suivant : tout recopier, renommer les identifiants, recâbler les attributs ARIA et réécrire le script quand le comportement attendu change. Ce cours transforme cet accordéon en composant autonome : un fragment HTML à coller où vous voulez, des couleurs branchées sur vos design tokens, et un simple attribut pour choisir entre un seul panneau ouvert à la fois ou plusieurs.

Composant accordéon : ce que vous saurez faire

Au-delà de ce menu, la méthode vaut pour tout code que vous voulez rendre réutilisable.

• Transformer un code existant en composant indépendant de son conteneur
• Rendre un comportement réglable par un attribut data, sans toucher au script
• Faire cohabiter plusieurs instances d'un composant sur une même page
• Isoler les couleurs derrière un contrat de variables relié à vos tokens
• Garder aria-expanded, aria-controls et hidden synchronisés avec l'état réel
• Désactiver les animations pour qui les a coupées sur son système
• Empêcher un bouton de soumettre un formulaire par accident

Mode single ou multiple : un attribut data-accordion, pas une ligne de JavaScript

Le comportement se règle dans le HTML. Avec la valeur multiple, chaque panneau s'ouvre et se ferme indépendamment ; avec single, ouvrir un panneau referme les autres du même groupe. Le script ne cherche pas les déclencheurs dans tout le document mais dans chaque accordéon, ce qui permet d'en poser plusieurs sur une page avec des réglages différents sans qu'ils interfèrent. La structure HTML et les attributs ARIA de départ sont repris du menu accordéon FAQ accessible du même formateur : ici, on ne les réexplique pas, on les industrialise.

Pourquoi l'ouverture de l'accordéon reste un fondu

Un effet de glissement à l'ouverture obligerait à retirer l'attribut hidden des panneaux fermés, et donc à les laisser lisibles par les lecteurs d'écran. Le cours fait le choix inverse : le panneau garde hidden, l'animation se limite à un fondu d'opacité, et elle disparaît entièrement quand l'utilisateur a demandé moins d'animations via prefers-reduced-motion. Moins spectaculaire, mais conforme.

Un composant documenté, rangé dans votre bibliothèque

Le composant rejoint le dossier components, sur le même modèle que le toggle switch de thème de l'épisode précédent : accordion.html, accordion.css et accordion.js, une page d'exemple qui montre un accordéon single et un multiple côte à côte, et un README qui rappelle l'intégration, les tokens requis et le chargement du CSS dans la couche components. Tous ces fichiers sont fournis.

Pour qui

Développeurs front-end de niveau intermédiaire, à l'aise avec HTML, CSS et JavaScript. Le cours s'appuie sur les briques posées dans les épisodes précédents de la série : nommage BEM, nesting CSS natif, variables et couches @layer. Si vous arrivez directement ici, ces notions sont utilisées sans être réexpliquées. Aucune librairie ni framework n'est nécessaire.

Pour aller plus loin

Si vous voulez couvrir les autres composants interactifs courants avec la même rigueur, le bundle accessibilité web : ARIA et composants accessibles réunit le menu burger, la modale, les onglets et l'accordéon.