Onglets / Sélecteur de persona : format, règles et exemples

Un sélecteur d’onglets/de persona offre à plusieurs lecteurs des parcours distincts à travers un sujet délimité, sans les envoyer vers des pages séparées. Les libellés identifient le parcours ; la sélection d’un onglet révèle son panneau au même emplacement. L’élément n’est utile que lorsque les panneaux sont de véritables équivalents et que chaque panneau reste présent dans le HTML initial de la page.

L’état rendu affiche un panneau actif, mais les deux autres panneaux sont également présents dans le modèle objet de document (DOM) — la représentation structurée de la page par le navigateur. Ils sont masqués avec l’attribut natif hidden, pas demandés après un clic. Un moteur de rendu de production ajoute le comportement clavier et pointeur décrit ci-dessous ; le contrat de contenu rédigé reste le même quelle que soit la plateforme.

Pourquoi cet élément est important

Les lecteurs filtrent une page selon leur rôle, leur objectif et leur niveau de responsabilité. Un spécialiste du contenu peut vouloir des instructions de rédaction, un spécialiste SEO des règles de validation, et un responsable d’équipe des principes de gouvernance. Un sélecteur de persona bien étiqueté réduit l’effort de traduction d’un conseil générique en « qu’est-ce que cela signifie pour moi ? ». Il maintient également le postulat commun en un seul endroit, ce qui évite que trois pages quasi identiques soient en concurrence pour la même intention.

L’avantage psychologique est la reconnaissance plutôt que l’interprétation. Un lecteur peut reconnaître un libellé tel que « Équipes SEO » plus rapidement qu’il ne peut parcourir trois paragraphes pour déduire lequel s’applique. Les onglets préservent également le contexte spatial : le panneau change sur place, permettant au lecteur de comparer les parcours équivalents sans faire défiler sans cesse l’introduction commune.

Cette commodité crée un compromis avec l’extractibilité machine. L’extractibilité machine est la capacité d’un robot d’exploration, d’un index de recherche, d’une technologie d’assistance ou d’un système de récupération à isoler le contenu tout en préservant son sujet et ses relations. Les titres et paragraphes visibles apparaissent dans une séquence de lecture évidente. Les panneaux d’onglets introduisent un état d’interaction : l’un est visible, plusieurs ne le sont pas, et le logiciel doit relier chaque libellé d’onglet au panneau correct. Une implémentation faible ne laisse que le panneau actif dans le HTML, charge les autres panneaux après un clic, ou répète des titres génériques comme « Avantages » sans le nom du persona. Dans chaque cas, la machine reçoit moins de contexte que ce que voit le lecteur.

Même une implémentation correcte peut réduire l’extractibilité par rapport à des sections ordinaires. Certains systèmes priorisent le texte initialement visible, aplatissent les relations interactives ou omettent le contenu masqué des extraits. Les onglets sont donc un outil d’acheminement de l’information, pas un moyen de dissimuler des réponses essentielles. Placez la réponse commune, la définition, l’avertissement, la condition d’éligibilité et la conclusion à l’extérieur de l’ensemble d’onglets. Utilisez les panneaux pour des applications, exemples, flux de travail ou preuves spécifiques au public, qui restent utiles une fois la réponse commune connue.

Appliquez les règles d’écriture des éléments : rédigez d’abord l’explication complète, puis classez un ensemble authentique de parcours lecteur équivalents comme cet élément typé. Les règles de cette page prévalent pour le mappage des panneaux, l’interaction et les limites de contenu.

Quand l’utiliser

Utilisez un sélecteur d’onglets/de persona lorsque toutes ces conditions sont réunies :

1. Deux à cinq publics, contextes ou modes reconnaissables nécessitent des applications différentes du même sujet.
2. Chaque panneau répond à la même question avec une profondeur comparable.
3. La plupart des lecteurs ont besoin d’un panneau à la fois, tandis qu’une minorité peut en comparer deux ou plus.
4. La réponse commune peut être énoncée en dehors de l’élément sans obliger le lecteur à ouvrir chaque onglet.
5. Garder les parcours sur une seule page est plus clair que de maintenir des pages séparées avec des introductions largement dupliquées.

Les utilisations pertinentes incluent les guides de mise en œuvre pour « Développeurs / Rédacteurs / Relecteurs », les parcours d’intégration pour « Solo / Équipe / Agence », et une capacité expliquée à travers « Planifier / Produire / Mesurer ». Les libellés de persona doivent refléter des différences significatives dans le flux de travail, les preuves, les autorisations ou le résultat souhaité — pas des suppositions démographiques.

Les cas limites viennent souvent de tentatives de raccourcir une page. Ne mettez pas les étapes séquentielles dans des onglets ; cacher l’étape deux jusqu’à ce que le lecteur la sélectionne détruit l’ordre de la procédure. Ne mettez pas une courte liste de définitions dans des onglets, car les titres ordinaires exposent les mêmes informations avec moins d’interaction. N’utilisez pas d’onglets pour une comparaison détaillée de fonctionnalités : un tableau comparatif garde les critères simultanément visibles. N’utilisez pas les onglets comme navigation entre des sujets sans rapport, et ne scindez pas l’information simplement parce que la page semble longue.

Un accordéon est plus approprié lorsque les sections sont des questions indépendantes dans un flux de lecture vertical ou lorsque plusieurs réponses doivent rester ouvertes. Des pages séparées sont meilleures lorsque chaque public nécessite une intention de recherche, un titre, un ensemble de preuves, un parcours de conversion distincts, ou plus d’environ 300 mots de contenu unique. Si un lecteur a besoin de tous les panneaux pour agir en toute sécurité ou correctement, les onglets sont le mauvais composant.

Où le placer

Placez le sélecteur après la réponse commune et le paragraphe qui explique pourquoi les parcours diffèrent. Le lecteur doit comprendre le sujet commun avant de choisir un libellé. Sur une page produit ou solution, cela se situe généralement après la proposition de valeur principale et l’explication de la capacité commune, mais avant les preuves détaillées et l’action de clôture principale. Dans la documentation, placez-le juste avant les instructions spécifiques au rôle qu’il contrôle.

Ne placez pas un ensemble d’onglets avant la réponse directe, la définition ou l’avertissement obligatoire de la page. Ne le placez pas entre une affirmation et sa source, entre un prérequis et la procédure qu’il régit, ou entre un prix et ses conditions d’application. Ces relations doivent survivre même lorsqu’aucun panneau n’est sélectionné. Un ensemble d’onglets ne peut pas être placé à côté d’un autre ensemble d’onglets, d’un accordéon, d’une grille de comparaison volumineuse ou d’un carrousel ; des modèles d’interaction adjacents créent des contrôles concurrents et un ordre de lecture peu clair.

Évitez les onglets imbriqués. Le choix externe masque le choix interne, crée un comportement clavier difficile et rend le lien profond ambigu. Évitez également de placer un sélecteur de persona juste au-dessus d’un autre sélecteur de public dans un formulaire ou un CTA. Si les deux contrôles utilisent des libellés similaires, les lecteurs peuvent ne pas savoir s’ils modifient le contenu visible ou soumettent une préférence.

Anatomie

L’anatomie comprend un conteneur étiqueté, une liste d’onglets ordonnée et un panneau pour chaque onglet. La capture d’écran doit montrer les panneaux inactifs dans l’inspecteur DOM ainsi que l’état visible, car la présence dans la source fait partie de l’élément, pas un détail d’implémentation.

1. Titre commun : Énonce la question ou la tâche commune que chaque panneau aborde.
2. Liste d’onglets : Regroupe deux à cinq libellés équivalents dans un ordre rédactionnel stable.
3. Libellé d’onglet : Nomme un public, un contexte ou un mode dans un langage que les lecteurs reconnaissent.
4. État sélectionné : Communique l’onglet actif par la sémantique du texte et un traitement visible, pas uniquement par la couleur.
5. Panneau : Contient un titre autonome et le contenu pour un libellé.
6. Relation programmatique : aria-controls sur l’onglet et aria-labelledby sur le panneau relient chaque paire.
7. Ordre de secours : Maintient le titre commun, les libellés et tout le contenu du panneau pertinents lorsque les scripts ou le style ne s’exécutent pas.

L’espacement, la bordure, la forme de l’indicateur, l’animation et le point de rupture appartiennent au moteur de rendu. Les auteurs contrôlent les libellés, l’ordre dans la source, le contenu des panneaux et un identifiant de fragment stable facultatif.

Exemples de conception

Le composant prend en charge quatre variantes. Chaque variante utilise le même modèle de contenu et la même exigence DOM.

Onglets persona : Utilisez des libellés de rôle lorsque les flux de travail, les preuves ou les actions suivantes diffèrent réellement selon le lecteur. Privilégiez le langage client établi comme « Équipes internes » plutôt que des personas inventés comme « Gourous de la croissance ».

Onglets contextuels : Utilisez des états non liés à une personne comme la taille de l’équipe, le modèle opérationnel ou le mode de mise en œuvre. Le titre commun doit nommer la dimension changeante afin que les libellés ne soient pas confondus avec une navigation de page.

Onglets verticaux : Utilisez-les uniquement lorsque les libellés ont besoin de plus d’espace horizontal et qu’il n’y en a pas plus de cinq. L’ordre DOM et clavier reste onglet un à onglet cinq, suivis de leurs panneaux associés selon l’implémentation accessible choisie.

État écran étroit et état de secours : Les libellés peuvent défiler horizontalement lorsqu’un indice visuel rend le débordement évident, ou le moteur de rendu peut exposer les panneaux sous forme de sections étiquetées empilées. Il ne doit pas tronquer les libellés en fragments ambigus ni supprimer le contenu inactif du HTML.

Paramètres

Le contrat de contenu maintient la relation explicite tout en laissant le comportement visuel et adaptatif au moteur de rendu.

Les libellés sont des attributs parce qu’ils actionnent le contrôle ; les titres des panneaux proviennent du premier titre parce qu’ils appartiennent au contenu. Les deux peuvent être similaires, mais un libellé d’onglet concis peut correspondre à un titre de panneau plus complet et extractible. Les corps des panneaux acceptent des paragraphes, une courte liste, du code en ligne, une image et une action contextuelle. Ils n’acceptent pas un autre ensemble d’onglets, un accordéon, un tableau de données, un formulaire, un lecteur vidéo ou une procédure en plusieurs étapes.

Syntaxe et exemples de code

Les trois notations préservent un titre, des libellés ordonnés, des titres de panneaux, des corps de panneaux, des ID stables et la valeur par défaut initiale. La directive Markdown portable est la forme rédactionnelle canonique.

Directive Markdown portable

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Choisissez votre équipe

::item{label="Équipes contenu" id=content-teams}
### Transformez le brief en un brouillon reproductible

Commencez par la réponse requise, les preuves et l'ensemble d'éléments. Rédigez le raisonnement en entier avant d'appliquer les composants.
::

::item{label="Équipes SEO" id=seo-teams}
### Vérifiez la découverte et l'extraction

Inspectez le HTML rendu, les liens internes, les titres et les champs structurés. Confirmez que chaque panneau arrive dans la réponse initiale.
::

::item{label="Chefs d'équipe" id=team-leaders}
### Examinez le système, pas seulement la page

Approuvez la promesse commune une fois, puis examinez où chaque public a réellement besoin d'un flux de travail, d'un argument ou d'une action suivante différents.
::
:::

Le premier titre du corps parent correspond à title. Chaque élément imbriqué prend label et id des attributs, associe son premier titre à item.title et le reste à item.content.

Shortcode Hugo

{{< tabs-persona-switcher title="Choisissez votre équipe" default="content-teams" variant="horizontal" >}}
  {{< tab-item label="Équipes contenu" id="content-teams" title="Transformez le brief en un brouillon reproductible" >}}
  Commencez par la réponse requise, les preuves et l'ensemble d'éléments. Rédigez le raisonnement en entier avant d'appliquer les composants.
  {{< /tab-item >}}
  {{< tab-item label="Équipes SEO" id="seo-teams" title="Vérifiez la découverte et l'extraction" >}}
  Inspectez le HTML rendu, les liens internes, les titres et les champs structurés. Confirmez que chaque panneau arrive dans la réponse initiale.
  {{< /tab-item >}}
  {{< tab-item label="Chefs d'équipe" id="team-leaders" title="Examinez le système, pas seulement la page" >}}
  Approuvez la promesse commune une fois, puis examinez où chaque public a réellement besoin d'un flux de travail, d'un argument ou d'une action suivante différents.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

L’adaptateur utilise uniquement des paramètres nommés. Il doit rendre tous les corps d’éléments pendant la réponse serveur, rejeter les ID en double et initialiser l’interaction sans réécrire le modèle de contenu.

Bloc WordPress

<!-- wp:amicited/tabs-persona-switcher {"title":"Choisissez votre équipe","default":"content-teams","variant":"horizontal"} -->
  <!-- wp:amicited/tab-item {"label":"Équipes contenu","id":"content-teams","title":"Transformez le brief en un brouillon reproductible"} -->
  <p>Commencez par la réponse requise, les preuves et l'ensemble d'éléments. Rédigez le raisonnement en entier avant d'appliquer les composants.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Équipes SEO","id":"seo-teams","title":"Vérifiez la découverte et l'extraction"} -->
  <p>Inspectez le HTML rendu, les liens internes, les titres et les champs structurés. Confirmez que chaque panneau arrive dans la réponse initiale.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Chefs d'équipe","id":"team-leaders","title":"Examinez le système, pas seulement la page"} -->
  <p>Approuvez la promesse commune une fois, puis examinez où chaque public a réellement besoin d'un flux de travail, d'un argument ou d'une action suivante différents.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPress doit limiter les blocs internes aux éléments d’onglets enregistrés. L’aperçu, le balisage enregistré et le rendu côté front doivent conserver chaque panneau ; la commodité de l’éditeur ne doit pas transformer les éléments inactifs en contenu récupéré côté client.

Exemples

Bon exemple

Choisissez un chemin d’implémentation

Plateforme hébergée — Lancez-vous sans gérer l’infrastructure

Connectez la source de données approuvée, configurez les rôles et validez la sortie dans un espace de travail de préproduction. Le fournisseur assure les mises à jour d’exécution et la surveillance ; votre équipe gère l’approbation du contenu et la revue des accès.

Auto-hébergé — Contrôlez le déploiement et les limites des données

Déployez le package pris en charge dans votre environnement, connectez la même source de données approuvée et désignez un responsable pour les mises à niveau, la surveillance, les sauvegardes et la revue des accès.

Cela fonctionne parce que les deux panneaux répondent à la même question d’implémentation, nomment la différence opérationnelle et contiennent des responsabilités comparables. « Plateforme hébergée » et « Auto-hébergé » sont des libellés reconnaissables. La décision commune reste claire si les deux panneaux sont aplatis dans l’ordre source.

Mauvais exemple

Explorez tout

Aperçu : Notre plateforme rend les équipes modernes plus efficaces.

Tarifs : Contactez les ventes pour un devis personnalisé et des conditions contractuelles importantes.

Sécurité : Lisez notre documentation sur la sécurité.

Carrières : Rejoignez notre équipe en pleine croissance.

Il s’agit d’une navigation de site déguisée en onglets. Les panneaux ne répondent pas à une question commune, les libellés mélangent informations d’achat et contenu d’entreprise, et des conditions tarifaires importantes sont dissimulées derrière une interaction. Remplacez l’ensemble par des sections de page ordinaires et une vraie navigation. Si les options tarifaires nécessitent une évaluation simultanée, utilisez une structure de tarification ou de comparaison plutôt que des onglets.

Balisage schema et accessibilité

Les onglets et sélecteurs de persona ne créent pas de type Schema.org dédié. Leur contenu reste partie intégrante de l’Article, TechArticle, Product ou WebPage englobant lorsque cette page se qualifie indépendamment. Ne marquez pas les onglets comme ItemList simplement parce qu’ils sont répétés, et ne générez pas plusieurs entités Person à partir des libellés de persona. Un libellé tel que « Agence » décrit un parcours lecteur, pas une assertion d’entité factuelle.

Utilisez le modèle d’onglets WAI-ARIA uniquement lorsque l’interface se comporte réellement comme des onglets. Le conteneur a role="tablist" ; chaque contrôle a role="tab", un ID unique, aria-controls et une valeur aria-selected précise ; chaque panneau a role="tabpanel" et aria-labelledby. Utilisez des boutons pour les contrôles, pas des liens avec des destinations fictives. L’onglet sélectionné appartient à l’ordre de tabulation de la page ; les onglets inactifs utilisent tabindex="-1" itinérant et restent accessibles avec les touches fléchées. Home et End déplacent vers le premier et le dernier onglet. L’activation peut suivre le focus uniquement lorsque le changement de panneau est immédiat ; sinon, Entrée ou Espace active l’onglet ciblé.

Le focus doit rester prévisible. La sélection d’un onglet ne pousse pas automatiquement le focus dans son panneau. Un panneau peut utiliser tabindex="0" lorsque son premier contenu n’est pas autrement focalisable, permettant aux utilisateurs clavier d’y entrer. Un indicateur de focus visible et un indicateur de sélection doivent différer, et aucun ne peut reposer uniquement sur la couleur.

Tous les panneaux doivent être rendus dans la réponse HTML initiale. Masquer les panneaux inactifs avec hidden, CSS ou un équivalent amélioré progressivement est acceptable ; les créer seulement après un clic ne l’est pas. Sans JavaScript, le repli doit exposer chaque panneau étiqueté dans l’ordre source ou fournir de véritables liens vers des destinations rendues par le serveur. Des fragments stables peuvent activer un panneau, mais la page canonique reste une seule URL. Testez le zoom, les écrans étroits, les libellés longs traduits, les relations avec les lecteurs d’écran, l’ordre clavier et les défaillances de script.

Règles d’écriture

Commencez par la question commune. Si chaque panneau proposé répond à une question différente, n’utilisez pas d’onglets. Rédigez deux à cinq éléments, avec une préférence pour trois ou quatre. Limitez les libellés à un à quatre mots et 28 caractères si possible. Utilisez une grammaire parallèle : tous les rôles (« Rédacteurs / Relecteurs »), tous les modes (« Hébergé / Auto-hébergé »), ou toutes les étapes (« Planifier / Produire / Mesurer »). Ne mélangez pas un rôle, un verbe et une expression marketing.

Donnez à chaque panneau un titre de 3 à 10 mots qui nomme à la fois le parcours pertinent et son résultat lorsque le libellé de l’onglet seul est insuffisant. Rédigez 40 à 180 mots par panneau, avec 300 comme maximum absolu. Les panneaux doivent avoir une profondeur comparable, mais ils n’ont pas besoin d’un nombre de mots identique. Utilisez un langage direct et des différences concrètes dans les tâches, les preuves, les autorisations, les contraintes ou les actions. Changer uniquement les pronoms de « vous » à « votre équipe » ne justifie pas un autre panneau.

Gardez les informations communes en dehors de l’élément. Répéter la même phrase d’ouverture dans chaque panneau crée une dérive de maintenance et donne l’impression que les passages extraits sont dupliqués. Mettez les différences dans les panneaux, et rendez chaque différence suffisamment explicite pour survivre à l’extraction. Préférez « Les équipes agence peuvent attribuer des rôles au niveau client » à « Vous obtenez plus de contrôle », qui perd son sujet lorsqu’il est séparé du libellé sélectionné.

Ne mettez jamais ces éléments dans un ensemble d’onglets :

• La seule définition, réponse directe, conclusion, avertissement de sécurité, condition juridique, règle d’éligibilité ou attribution de source de la page.
• Les étapes séquentielles que chaque lecteur doit accomplir, ou les prérequis qui régissent le contenu en dehors d’un panneau.
• Un autre ensemble d’onglets, accordéon, carrousel, tableau de données complexe, formulaire multi-champs ou média à lecture automatique.
• Plus d’un appel à l’action principal par panneau, ou des actions qui mènent à des étapes d’entonnoir sans rapport.
• Du contenu chargé seulement après interaction, même lorsque l’état de chargement est rapide pour un utilisateur humain.
• Des libellés tels que « Autre », « Plus », « Général » ou « Ressources » qui masquent une relation non définie.

Si chaque panneau dépasse 300 mots, nécessite son propre ensemble de preuves ou cible une intention de recherche différente, publiez des sections ou des pages dédiées. Si les lecteurs doivent comparer plusieurs critères à la fois, utilisez un tableau. Si le contenu n’est qu’un détail facultatif, utilisez de la prose ou un accordéon selon la relation.

Types d’articles qui l’utilisent

Le champ postTypes du frontmatter est la source de ce tableau. L’inclusion signifie que le format peut prendre en charge les onglets ; elle ne les rend pas obligatoires.

Liste de contrôle QA

• Une question commune : Chaque panneau répond à la même question délimitée pour un public, un contexte ou un mode différent.
• Nombre approprié : L’ensemble contient deux à cinq onglets, de préférence trois ou quatre, avec des libellés parallèles concis.
• Réponse commune visible : La définition, la réponse principale, la condition obligatoire et la conclusion restent en dehors de l’ensemble d’onglets.
• Présence DOM initiale : Chaque panneau et son contenu rédigé complet apparaissent dans le HTML initial rendu par le serveur.
• Contexte explicite : Chaque titre de panneau et phrase d’ouverture restent compréhensibles lorsqu’ils sont extraits sans l’état visuel de l’onglet.
• Relations correctes : Les ID des onglets et des panneaux sont uniques ; aria-controls et aria-labelledby les apparient correctement.
• Comportement clavier : Le comportement des touches Flèche, Home, End, Entrée, Espace, Tab et Shift+Tab correspond au modèle d’activation choisi.
• Clarté du focus : Le focus et la sélection sont visuellement distincts, et la sélection ne déplace pas le focus de manière inattendue.
• Repli stable : Une défaillance de script expose le contenu étiqueté ou des destinations rendues par le serveur utilisables sans perte d’information.
• Comportement adaptatif : Les libellés restent complets et découvrables sur les largeurs étroites, au zoom 200 % et avec du texte traduit plus long.
• Placement sûr : Le composant ne sépare pas une affirmation de sa preuve, un avertissement de son champ d’application, ou des prérequis des instructions.
• Pas d’imbrication complexe : Les panneaux contiennent de la prose délimitée et du contenu de support simple, pas un autre système d’interaction.
• Retenue schema : Le moteur de rendu n’invente pas de schema de liste, de personne ou de public à partir des libellés de présentation.
• Parité des notations : Markdown, Hugo et WordPress préservent le même ordre, les mêmes ID, la même valeur par défaut, les mêmes libellés, titres et corps de panneaux.

Un relecteur doit rejeter le composant lorsque le contenu inactif nécessite une requête réseau déclenchée par un clic, lorsque des informations essentielles n’existent qu’à l’intérieur d’un seul panneau, ou lorsque les libellés ne décrivent pas des parcours équivalents. Ce sont des échecs de contenu et d’architecture ; le raffinement visuel ne peut pas les corriger.

FAQ

Les entrées FAQ structurées dans le frontmatter traitent de l’indexation, des URL de fragment, du nombre d’onglets, des appels à l’action et de la distinction entre onglets et accordéons. Elles sont intentionnellement en dehors de l’élément interactif afin que chaque lecteur et moteur de rendu reçoive les mêmes recommandations d’implémentation.