Accordéon

Composant permettant d’optimiser l’affichage d’un contenu dans un espace réduit grâce à un système de « plier/déplier ».

Démonstration

Implémentation

HTML

<div class="accordion">
  <h3>
    <button id="tab1" aria-controls="panel1">Entête n<sup>o</sup> 1</button>
  </h3>
  <div id="panel1" aria-labelledby="tab1" aria-hidden="false">
    <p>---</p>
  </div>
  <h3>
    <button id="tab2" aria-controls="panel2" >Entête n<sup>o</sup> 2</button>
  </h3>
  <div id="panel2" aria-labelledby="tab2">
    <p>---</p>
  </div>
  <h3>
    <button id="tab3" aria-controls="panel3" >Entête n<sup>o</sup> 3</button>
  </h3>
  <div id="panel3" aria-labelledby="tab3">
    <p>---</p>
  </div>
  <h3>
    <button id="tab4" aria-controls="panel4">Entête n<sup>o</sup> 4</button>
  </h3>
  <div id="panel4" aria-labelledby="tab4">
    <p>---</p>
  </div>
</div>

Attention ! Pensez à personnaliser la balise titre. Il n’est pas obligatoire pour permettre au script de fonctionner d’utiliser des balises de niveau de titre (h1 à h6). Une balise avec le couple d'attribut role="heading et aria-level peu faire l'affaire. N'hésitez pas à parcourir la fiche AcceDe Web « Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6> » pour utiliser une hiérarchie de titres adéquate.

CSS

/* Pour un simple afficher-masquer */
.accordion [aria-hidden="true"] {
  display: none;
}

JavaScript

// Instanciation des accordéons
var list = document.querySelector( '.accordion' );
var accordion = new window.Accordion( list );


// il est possible d'ajouter des écouteurs sur l'ouverture et la fermeture des onglets
accordion.on( 'show', function( header, panel ){
  …
});

accordion.on( 'hide', function( header, panel ){
  …
});

// démarage du plugin
accordion.mount();

Description

Pour fonctionner l’accordéon a besoin d’être dans un conteneur. L’attribut data-multiselectable sur ce conteneur permet de définir si l’on souhaite avoir plusieurs panneaux affichés à la fois (data-multiselectable="true"). Les entêtes sont définis par un bouton se trouvant dans un élément titre. Afin de lier les onglets aux panneaux, il faut rajouter l’attribut aria-controls avec pour valeur l’id du panneau que l’on souhaite lier. Si ce n’est pas le cas, le script ne se déclenchera pas. Les panneaux, doivent avoir un identifiant unique : l’attribut id.

Attributs

Conteneur

Entêtes

Panneaux

Script

Le script est disponible sur npm :

$ npm install @accede-web/accordion

Il ne reste alors qu'à l'appeler dans le script souhaité :

import Accordion from '@accede-web/accordion';

var accordion = new Accordion( el );

Dans le cas où ce script est utilisé avec babel et Webpack ou Rollup, il faut configurer babel afin qu'il compile ce plugin. Cela est possible via le fichier .babelrc ou dans les configurations de Webpack et Rollup :

{
  "exclude": "node_modules/!(@accede-web)/**",
}

Cette ligne continura d'exclure les scripts contenus dans le répertoire node_modules sauf ceux s'appelant @accede-web.

Le plugin est aussi téléchargeable depuis Github :
https://github.com/AcceDe-Web/accordion.

Le fichier est disponible en version minifiée ou non-minifiée dans le répertoire dist. Il est ensuite disponible sur l'objet window :

<script src="accordion.min.js"></script>

<script>
  var accordion = new window.Accordion( el );
</script>

Compatibilité

Ce composant a été testé sur les navigateurs suivants :

Aller plus loin

Le script de cette page est basé sur la notice d’accessibilité pour les composants d’interface riche des accordéons AcceDe Web d’Atalan.

N’hésitez pas à aller faire un tour chez eux pour approfondir le sujet.