Notre glossaire, méticuleusement élaboré, est votre boussole dans l’univers complexe et dynamique du marketing, de la communication et du digital. Ici, chaque terme est une clé que nous vous aidons à décrypter pour vous ouvrir a des concepts innovants et des stratégies éprouvées. Plongez dans nos thématiques pour éclairer votre chemin vers l’excellence et la créativité.
Un menu par onglets est un composant d’interface qui présente plusieurs sections de contenu sous forme d’onglets cliquables regroupés dans une même barre, un seul panneau de contenu restant affiché à la fois.
Le W3C, dans son guide des pratiques de conception accessibles (WAI-ARIA Authoring Practices), décrit trois composantes. La liste d’onglets regroupe les étiquettes. Chaque onglet sert de libellé à un panneau et l’affiche lorsqu’il est activé. Le panneau contient le contenu associé. L’onglet actif est signalé visuellement et dans le code, de sorte que l’utilisateur sait toujours quelle section il consulte. Au clavier, la touche de tabulation conduit à l’onglet actif, puis les flèches font passer d’un onglet à l’autre. Le panneau peut s’afficher dès que l’onglet reçoit le focus (activation automatique) ou après une validation par la touche Entrée ou Espace (activation manuelle).
L’expression recouvre deux usages. Dans une page, les onglets répartissent des contenus de même niveau, par exemple la description, les caractéristiques et les avis d’une fiche produit. À l’échelle d’un site, une barre de navigation principale peut prendre l’apparence d’onglets : chaque élément est alors un lien vers une autre page. Le menu par onglets se distingue du menu déroulant, qui révèle une liste d’options à l’ouverture, et de l’accordéon, qui empile les sections verticalement et permet souvent d’en ouvrir plusieurs à la fois.
Le composant est courant sur les fiches produit, les espaces client, les pages de paramètres et les tableaux de bord. Il concerne les concepteurs d’interface, les développeurs et les équipes chargées du contenu.
La première question à trancher est celle de la nature des onglets. Des onglets qui affichent des panneaux dans la même page partagent une seule adresse. Des onglets qui mènent à des pages distinctes sont des liens de navigation, avec chacun leur adresse. Les confondre produit deux défauts classiques : des panneaux impossibles à partager par lien, ou des liens codés comme des onglets, que les technologies d’assistance annoncent mal.
Le choix touche aussi le référencement mobile. La documentation Google Search Central sur l’indexation mobile (2025) admet le contenu placé dans des onglets ou des accordéons. Elle précise en revanche que le moteur ne charge pas un contenu qui exige une interaction de l’utilisateur, comme un clic. Un panneau dont le texte n’est récupéré qu’au clic risque donc de rester invisible pour l’indexation. Nous recommandons d’inclure le contenu de tous les panneaux dans le code de la page dès son chargement.
Une mesure d’audience standard ne voit pas les ouvertures d’onglets. Il faut les déclarer comme événements. Deux lectures sont alors utiles. Si la grande majorité des visiteurs ouvre le même onglet, son contenu mérite sans doute d’être affiché par défaut. Si un onglet n’est presque jamais ouvert, son libellé ou sa place sont à revoir avant son contenu. Un test utilisateur sur quelques personnes suffit souvent à repérer un libellé ambigu.
En assistance à maîtrise d’ouvrage, Advalians analyse vos pratiques, évalue vos dispositifs et restitue des chantiers de refonte priorisés.
Les onglets affichent un seul panneau à la fois, avec les libellés alignés dans une barre. L’accordéon empile les sections les unes sous les autres et permet souvent d’en ouvrir plusieurs. Les onglets conviennent à un petit nombre de sections courtes et de même niveau, consultées sur un écran large. L’accordéon s’adapte mieux au mobile et aux libellés longs, car il ne dépend pas de la largeur de l’écran.
Critère pratique : si les libellés ne tiennent pas sur une ligne à la plus petite largeur d’écran visée, préférez l’accordéon.
Suivez le modèle « Tabs » du guide WAI-ARIA Authoring Practices du W3C. La touche de tabulation amène le focus sur l’onglet actif, puis la quitte vers l’élément suivant de la page. Les flèches gauche et droite font passer d’un onglet à l’autre, en revenant au début après le dernier. Début et Fin peuvent mener au premier et au dernier onglet.
Côté code, l’onglet actif porte aria-selected à vrai et chaque onglet référence son panneau. Testez ensuite le composant avec un lecteur d’écran avant la mise en ligne.
Déclarez chaque ouverture d’onglet comme un événement dans votre outil de web analyse, avec le libellé de l’onglet en paramètre. Rapportez ensuite le nombre d’ouvertures au nombre de pages vues, onglet par onglet.
Lisez le résultat comme un signal de priorité. Un onglet ouvert par la plupart des visiteurs devrait sans doute être affiché par défaut. Un onglet presque jamais ouvert appelle une vérification de son libellé. Croisez ces chiffres avec le taux de conversion de la page avant de déplacer un contenu.
Oui, s’il est présent dans le code de la page dès son chargement. La documentation du principal moteur de recherche sur l’indexation mobile admet le contenu en onglets ou en accordéons. Elle indique aussi que le robot ne déclenche pas les interactions comme un clic.
Le risque vient donc des panneaux chargés à la demande. Vérifiez avec l’outil d’inspection d’URL de votre console de recherche que le texte de chaque panneau apparaît dans le rendu de la page. Si ce n’est pas le cas, intégrez-le au code initial.
Renoncez-y lorsque le visiteur a besoin de voir plusieurs contenus en même temps, par exemple pour comparer des offres, ou lorsque la lecture suit un ordre logique. Une page longue et bien titrée, éventuellement complétée d’un sommaire, sert mieux ces cas.
Évitez-les aussi pour plus de cinq ou six sections, repère que nous proposons et non une norme : la barre déborde et les libellés se raccourcissent. Les onglets restent pertinents pour des contenus de même niveau, indépendants les uns des autres, dans une ergonomie web pensée d’abord pour l’écran large.
Par Thomas Bizot – Président du cabinet Advalians
