Onglets

Composant permettant d’optimiser l’affichage du contenu d’une page dans un espace réduit grâce à un système d’étiquettes.

Démonstration

  • Onglet no 1
  • Onglet no 2
  • Onglet no 3
  • Onglet no 4

Le saviez-vous ? Le motif de conception « onglets » est très similaire à celui des « accordéons ». Ils partagent en effet les mêmes rôles ARIA : tablist, tab et tabpanel. Ils se démarquent principalement par les raccourcis clavier utilisables. N’hésitez pas à aller voir la notice d’accessibilité des accordéons ainsi que la page de démonstration du composant « accordeon ».

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.

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.

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

<ul role="tablist">
  <li role="tab" aria-controls="panneau-1">Onglet n<sup>o</sup> 1</li>
  <li role="tab" aria-controls="panneau-2">Onglet n<sup>o</sup> 2</li>
  <li role="tab" aria-disabled="true" aria-controls="panneau-3">Onglet n<sup>o</sup> 3</li>
  <li role="tab" aria-controls="panneau-4">Onglet n<sup>o</sup> 4</li>
</ul>

<div role="tabpanel" id="panneau-1">
  <p>---</p>
</div>
<div role="tabpanel" id="panneau-2">
  <p>---</p>
</div>
<div role="tabpanel" id="panneau-3">
  <p>---</p>
</div>
<div role="tabpanel" id="panneau-4">
  <p>---</p>
</div>

CSS

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

/* Pour un effet sur les éléments désactivés */
[role="tab"][aria-disabled="true"] {
  opacity: 0.5;
}

JavaScript

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

// 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
});

Description

Pour fonctionner, les onglets ont besoin d’un conteneur avec le rôle tablist. Ce conteneur contiendra les onglets. Ces onglets sont définis par l’attribut role ayant pour 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 a l’attribut role="tabpanel". Dans le cas contraire, le script ne se déclenchera pas. Les panneaux doivent avoir le rôle tabpanel et un identifiant unique : l’attribut id.

Attributs

Onglets

Les onglets doivent être contenus dans un élément HTML ayant l’attribut role="tablist".

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 onglets AcceDe Web d’Atalan.

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