Accordéon

Démonstration

• Ouverture de plusieurs panneaux :

  Entête n^o 1

  Exemple de panneau comportant un lien tabulable seulement lorsqu'ouvert.

  Entête n^o 2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non distinctio, corporis, sapiente in accusantium perferendis consectetur quos quis, fugiat assumenda obcaecati. Reiciendis culpa, ut repellendus suscipit, iste rem. Animi, reprehenderit.

  Entête n^o 3

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, eos, cumque. Suscipit, eius, cupiditate! Placeat voluptate quis, iste iure culpa, sequi, inventore ducimus vel voluptates nam, ut architecto ab reprehenderit.

  Entête n^o 4

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, eos, cumque. Suscipit, eius, cupiditate! Placeat voluptate quis, iste iure culpa, sequi, inventore ducimus vel voluptates nam, ut architecto ab reprehenderit.

• Ouverture d’un seul panneau à la fois :

  Entête n^o 1

  Il est possible de n’ouvrir qu'un seul panneau à la fois en mettant l’attribut data-multiselectable à false.

  Entête n^o 2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non distinctio, corporis, sapiente in accusantium perferendis consectetur quos quis, fugiat assumenda obcaecati. Reiciendis culpa, ut repellendus suscipit, iste rem. Animi, reprehenderit.

  Entête n^o 3

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, eos, cumque. Suscipit, eius, cupiditate! Placeat voluptate quis, iste iure culpa, sequi, inventore ducimus vel voluptates nam, ut architecto ab reprehenderit.

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

• data-multiselectable : optionnel, avec la valeur true lorsqu’on veut garder ouverts plusieurs panneaux Dans le cas où cet attribut est absent, l’accordéon n'affiche qu'un panneau à la fois.

Entêtes

• aria-controls : obligatoire avec la valeur de l’attribut id du panneau ;
• id : optionel, permet au panneau d’avoir un label ;
• data-expand : optionnel, permet de définir l’entête en cours comme ouvert lors de l’initialisation du script.

Panneaux

• id : obligatoire avec comme valeur un identifiant unique dans la page ;
• aria-labelledby : optionel, permet de lier le panneau à sont label.

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 :

• Internet Explorer 10 et supérieur
• Microsoft Edge
• Chrome
• Firefox
• Safari

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.