Éléments de style

Onglets

Système d’onglets, présentés verticalement, utiles pour diviser un formulaire contenant des sections optionnelles, ou comme élément de navigation général. Il est composé d'une série de boutons (tablist) puis d'une série de panneaux (tabpanel).

<div class="pk-tabs">
 <div class="pk-tabs--tab-list" role="tablist">
  <button aria-controls="panel-first" aria-selected="true" id="tab-first" role="tab" tabindex="0">Premier</button>
  <button aria-controls="panel-second" aria-selected="false" id="tab-second" role="tab" tabindex="-1">Deuxième</button>
  <button aria-controls="panel-third" aria-selected="false" id="tab-third" role="tab" tabindex="-1">Troisième</button>
 </div>
 <div class="pk-tabs--container">
  <div aria-labelledby="tab-first" id="panel-first" role="tabpanel" tabindex="0">
   <p>Un premier contenu</p>
  </div>
  <div aria-labelledby="tab-second" hidden="" id="panel-second" role="tabpanel" tabindex="0">
   <p>Un autre contenu</p>
  </div>
  <div aria-labelledby="tab-third" hidden="" id="panel-third" role="tabpanel" tabindex="0">
   <p>Encore un autre contenu</p>
  </div>
 </div>
</div>

Voir aussi : Article MDN sur l’accessibilité et les onglets, avec exemple.