tablist

Quand l’utiliser

Autour de la rangée (ou colonne) d’éléments role="tab" dans une interface à onglets. La tablist DOIT avoir un nom accessible via aria-label ou aria-labelledby — sans cela, un utilisateur de lecteur d’écran entendant « liste d’onglets » ne peut pas identifier laquelle sur la page il s’agit.

Les barres d’onglets verticales nécessitent aria-orientation="vertical". La valeur par défaut est horizontale ; omettez l’attribut pour les onglets horizontaux.

Si vos « onglets » pointent vers d’autres URL, utilisez <nav> avec des liens <a> — le modèle où un clic change l’URL ne correspond pas à la sémantique de tablist.

Contrat clavier et focus

Conformément au modèle APG tabs :

• Tab déplace le focus dans la tablist sur l’onglet sélectionné ; un second Tab le fait SORTIR (en général dans le tabpanel actif).
• Les flèches Gauche/Droite déplacent le focus entre les onglets (Haut/Bas pour les tablists verticales). L’effet circulaire est facultatif mais conventionnel.
• Début / Fin sautent au premier / dernier onglet.
• Activation : en mode automatique, les touches fléchées déplacent le focus ET sélectionnent. En mode manuel (recommandé lorsque l’activation est coûteuse), Espace ou Entrée sélectionne l’onglet ayant le focus.

La tablist elle-même ne gère pas le focus — le focus va sur l’onglet, pas sur le conteneur tablist.

Erreurs courantes

• Tablist sans nom accessible. Plusieurs tablists sur une même page deviennent indiscernables.
• Tous les onglets ont tabindex="0". Le modèle n’utilise qu’un seul point d’arrêt Tab ; seul l’onglet sélectionné porte tabindex="0".
• aria-orientation="vertical" absent sur une tablist verticale — le lecteur d’écran indique aux utilisateurs d’utiliser Gauche/Droite alors que la disposition visuelle exige Haut/Bas.
• role="tablist" entourant des liens (<a href="#section">) plutôt que des boutons. Le défilement ancré modifie la page et casse le bouton Précédent.
• Tabpanel masqué via display: none ET l’attribut hidden alors qu’un seul suffit.

Exemple

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>