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 role="tablist" aria-multiselectable="true">
  <h3 class="tab">
    <span id="tab1" role="tab" aria-controls="panel1">Entête n<sup>o</sup> 1</span>
  </h3>
  <div id="panel1" role="tabpanel" aria-labelledby="tab1">
    <p>---</p>
  </div>
  <h3 class="tab">
    <span id="tab2" role="tab" aria-controls="panel2">Entête n<sup>o</sup> 2</span>
  </h3>
  <div id="panel2" role="tabpanel" aria-labelledby="tab2">
    <p>---</p>
  </div>
  <h3 class="tab">
    <span id="tab3" role="tab" aria-controls="panel3">Entête n<sup>o</sup> 3</span>
  </h3>
  <div id="panel3" role="tabpanel" aria-labelledby="tab3">
    <p>---</p>
  </div>
  <h3 class="tab">
    <span id="tab4" role="tab" aria-controls="panel4">Entête n<sup>o</sup> 4</span>
  </h3>
  <div id="panel4" role="tabpanel" aria-labelledby="tab4">
    <p>---</p>
  </div>
</div>

Attention ! Pensez à personnaliser la balise ayant le role="tab". Il n’est pas obligatoire pour permettre au script de fonctionner d’utiliser des balises de niveau de titre. Dans le cas où vous souhaitez utiliser ces balises, 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, mais gardez à l’esprit que ces titres perdront leur sémantique de titre au profit d’une sémantique d’onglet d’accordéon.

CSS

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

JavaScript

// Instanciation des accordéons
var list = document.querySelector( '[role="tablist"]' );
var tablist = new window.Tablist( list );

// Il est possible de fermer tous les panneaux au chargement
tablist.closeAll();


// Il est aussi possible de passer un objet d'options
// afin d’exécuter des actions à l’ouverture et à la fermeture
// des panneaux (animation des panneaux par exemple)
var tablist = new window.Tablist( list, {
  openTab: myOpenFunc,     // ouverture
  closeTab: myCloseFunc,   // fermeture
  closeAll: myCloseAllFunc // fermeture de tous les onglets
});

Description

Pour fonctionner l’accordéon a besoin d’être dans un conteneur avec le rôle tablist. L’attribut aria-multiselectable permet de définir si l’on souhaite avoir un seul panneau d’affiché à la fois (aria-multiselectable="false") ou plusieurs (aria-multiselectable="true"). Les entêtes sont définis par l’attribut role ayant la valeur tab. 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. Dans le cas où l’onglet n’a pas d’attribut aria-controls le script utilisera l’élément HTML suivant l’onglet si cet élément porte l’attribut role="tabpanel". Si ce n’est pas le cas, le script ne se déclenchera pas. Les panneaux, doivent avoir le rôle tabpanel et peuvent avoir un identifiant unique : l’attribut id. Le panneau est décrit par le lecteur d’écran grâce à l’attribut aria-labelledby ayant pour valeur l’id de l’entête lui faisant référence.

Attributs

Conteneur

Entêtes

Panneaux

Script

Le script est disponible sur npm :

$ npm install accedeweb-tablist

Il est aussi téléchargeable depuis Github :
https://github.com/AcceDe-Web/tablist.

Le fichier est disponible en version minifiée ou non-minifiée dans le répertoire dist.

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.