Onglet
Regroupement de panneaux affichés un à la fois, avec barre d’onglets et prise en charge clavier fournie par le script DSBJ.
Exemple
Contenu du premier onglet…
Contenu du deuxième onglet…
Contenu du troisième onglet…
<div class="bj-tabs" data-bj-tabs>
<div class="bj-tabs__list" role="tablist" aria-label="Exemple">
<button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="true" tabindex="0">Onglet 1</button>
<button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="false" tabindex="-1">Onglet 2</button>
<button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="false" tabindex="-1">Onglet 3</button>
</div>
<div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel" data-bj-expanded><p>Contenu du premier onglet…</p></div>
<div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel"><p>Contenu du deuxième onglet…</p></div>
<div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel"><p>Contenu du troisième onglet…</p></div>
</div>Nombreux onglets (défilement)
La liste bj-tabs__list autorise le défilement horizontal lorsque les libellés dépassent la largeur (mobile ou intitulés longs).
Première étape du formulaire multi-onglets.
Étape suivante.
Pièces jointes.
Récapitulatif.
Signature.
Confirmation d’envoi.
<div class="bj-tabs" data-bj-tabs>
<div class="bj-tabs__list" role="tablist" aria-label="Étapes">
<button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="true" tabindex="0">Étape 1 — Identité</button>
<button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="false" tabindex="-1">Étape 2 — Coordonnées</button>
<!-- … jusqu’à 6–8 onglets selon le parcours -->
</div>
<div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel" data-bj-expanded>…</div>
…
</div>Marquage sans script
Sans JavaScript, reproduisez l’état actif avec aria-selected="true" sur l’onglet courant, tabindex="0" / tabindex="-1" sur les autres, et data-bj-expanded sur le panneau affiché. Les classes bj-tabs__tab--active et bj-tabs__panel--active reprennent le même style que le script.
Panneau visible sans data-bj-tabs.
Ce panneau reste masqué par le CSS.
<div class="bj-tabs">
<div class="bj-tabs__list" role="tablist" aria-label="Sans script">
<button type="button" class="bj-tabs__tab bj-tabs__tab--active" role="tab" aria-selected="true" tabindex="0">Actif</button>
<button type="button" class="bj-tabs__tab" role="tab" aria-selected="false" tabindex="-1">Inactif</button>
</div>
<div class="bj-tabs__panel bj-tabs__panel--active" role="tabpanel" data-bj-expanded><p>Panneau visible</p></div>
<div class="bj-tabs__panel" role="tabpanel"><p>Masqué</p></div>
</div>Navigation clavier
Lorsqu’un onglet a le focus, utilisez Flèche droite et Flèche gauche pour passer à l’onglet suivant ou précédent (le panneau affiché suit la sélection). Début (Home) active le premier onglet, Fin (End) le dernier. Le script repositionne le focus sur l’onglet cible.
Classes CSS
| Classe / attribut | Description |
|---|---|
bj-tabs + data-bj-tabs | Conteneur racine ; data-bj-tabs est requis pour que le script initialise le groupe. Un id optionnel sur ce nœud sert de préfixe aux id générés (suffixes -tab-0, -tab-1, … et -panel-0, -panel-1, …) ; sinon le script utilise un préfixe du type bj-tabs-1, bj-tabs-2, etc. |
bj-tabs__list | Barre d’onglets (role="tablist"). |
bj-tabs__tab + data-bj-tab | Bouton d’onglet (role="tab", data-bj-tab) ; le script renseigne aria-controls vers le panneau associé. |
bj-tabs__panel + data-bj-tab-panel | Panneau (role="tabpanel", data-bj-tab-panel) ; visibilité par data-bj-expanded. Le script renseigne aria-labelledby vers l’onglet correspondant et tabindex="0" sur le panneau actif. |
bj-tabs__tab--active | Modificateur CSS optionnel sur l’onglet sélectionné (équivalent visuel à aria-selected="true"). |
bj-tabs__panel--active | Modificateur CSS optionnel sur le panneau visible (équivalent à data-bj-expanded). |
Accessibilité
Pour le HTML « vanilla », le script repère le groupe via data-bj-tabs sur le conteneur, data-bj-tab sur chaque bouton d’onglet et data-bj-tab-panel sur chaque panneau. Les rôles role="tablist", role="tab" et role="tabpanel" structurent le motif ARIA des onglets.
Le script attribue des identifiants stables si vous n’en fournissez pas : chaque onglet id="{groupId}-tab-{n}" et chaque panneau id="{groupId}-panel-{n}", où groupId est l’attribut id du conteneur data-bj-tabs s’il est présent, sinon une valeur générée du type bj-tabs-1.
Chaque onglet reçoit aria-controls référençant l’id de son panneau ; chaque panneau reçoit aria-labelledby référençant l’id de son onglet, ce qui lie explicitement la barre d’onglets au contenu affiché.
Le script met à jour aria-selected avec une valeur booléenne (true pour l’onglet actif, false pour les autres). Le tabindex suit le motif attendu : 0 sur l’onglet sélectionné, -1 sur les autres. Le panneau visible reçoit tabindex="0" pour pouvoir recevoir le focus clavier ; les panneaux masqués n’ont pas de tabindex.
Navigation clavier lorsque le focus est sur un onglet : les flèches gauche et droite activent l’onglet précédent ou suivant (parcours circulaire) et déplacent le focus sur cet onglet ; les touches Début (Home) et Fin (End) activent respectivement le premier et le dernier onglet et repositionnent le focus sur l’onglet correspondant. Le panneau affiché suit la sélection.
Prévoyez un libellé accessible sur la tablist (aria-label ou aria-labelledby) pour que le groupe d’onglets soit correctement annoncé.