tab

Quand l’utiliser

Pour un onglet dans une barre d’onglets horizontale ou verticale. Un onglet DOIT être un enfant direct d’un élément role="tablist" (ou appartenir à lui via aria-owns). Chaque onglet DOIT pointer vers son panneau associé avec aria-controls="<tabpanel-id>". Le aria-labelledby réciproque se trouve sur le panneau et pointe en retour vers l’onglet.

Les onglets constituent un modèle applicatif. Si vos « onglets » servent en réalité à naviguer entre des pages distinctes, utilisez <nav> avec des liens <a> — le changement d’URL rend le modèle d’onglets inapproprié.

L’onglet est généralement un <button>. La sémantique du bouton se combine proprement avec role="tab", et la gestion du focus et de l’activation est fournie gratuitement.

Contrat clavier et focus

Conformément au modèle APG tabs :

• Tab déplace le focus dans la tablist, sur l’onglet actif. Un second Tab le fait SORTIR vers l’élément focalisable suivant (en général dans le tabpanel lui-même s’il possède tabindex="0").
• Les flèches Gauche/Droite (ou Haut/Bas pour les tablists verticales) déplacent le focus entre les onglets.
• Début / Fin sautent au premier / dernier onglet.
• L’activation peut être automatique (focus = sélection) ou manuelle (Espace/Entrée pour sélectionner). Choisissez le mode manuel lorsque l’activation d’un onglet déclenche un travail coûteux.

Utilisez un tabindex itinérant : seul l’onglet sélectionné porte tabindex="0".

Erreurs courantes

• Tous les onglets avec tabindex="0" — Tab parcourt chaque onglet plutôt que le panneau.
• aria-controls absent reliant l’onglet au tabpanel.
• aria-selected="true" sur plus d’un onglet.
• Onglets implémentés avec <a href="#section"> — le fragment d’URL change, le bouton Précédent navigue désormais entre les onglets et le modèle se dégrade.
• Aucune gestion du focus lors de l’activation : cliquer sur un onglet met à jour le panneau mais la prochaine touche Tab revient à l’en-tête de page plutôt que d’entrer dans le panneau.

Exemple

<div role="tablist" aria-label="Account settings">
  <button role="tab" id="t-profile"  aria-selected="true"  aria-controls="p-profile"  tabindex="0">Profile</button>
  <button role="tab" id="t-billing"  aria-selected="false" aria-controls="p-billing"  tabindex="-1">Billing</button>
  <button role="tab" id="t-security" aria-selected="false" aria-controls="p-security" tabindex="-1">Security</button>
</div>
<section role="tabpanel" id="p-profile"  aria-labelledby="t-profile"  tabindex="0">…</section>
<section role="tabpanel" id="p-billing"  aria-labelledby="t-billing"  hidden>…</section>
<section role="tabpanel" id="p-security" aria-labelledby="t-security" hidden>…</section>