Onglets

Démonstration

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 onglets
var list = document.querySelector( '[role="tablist"]' );
var tablist = new Tablist( list );

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

tablist.on( 'hide', function( tab, tabPanel ){
  …
});

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

Description

Pour fonctionner, les onglets ont besoin d’un conteneur parent avec le rôle tablist. 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. Les panneaux doivent avoir le rôle tabpanel et un identifiant unique : l’attribut id.

Attributs

Conteneur

• role="tablist" : obligatoire, permet de définir l'élément contenant les onglets.

Onglets

• role="tab" : obligatoire ;
• aria-controls : obligatoire avec la valeur de l’attribut id du panneau qu'il contrôle ;
• data-open : optionnel, permet de définir l’onglet ayant cet attribut comme ouvert lors de l’initialisation du script.

Panneaux

• role="tabpanel" : obligatoire ;
• id : obligatoire avec comme valeur un identifiant unique dans la page.

Script

Le script est disponible sur npm :

$ npm install @accede-web/tablist

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

import Tablist from '@accede-web/tablist';

var tablist = new Tablist( 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/tablist.

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="tablist.min.js"></script>

<script>
  var tablist = new window.Tablist( 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 onglets AcceDe Web d’Atalan.

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