Záložky / Prepínač osôb: Formát, pravidlá a príklady

Prepínač záložiek/osôb poskytuje viacerým čitateľom odlišné cesty jednou ohraničenou témou bez toho, aby ich posielal na samostatné stránky. Popisky identifikujú cestu; výber jednej odhalí jej panel na rovnakom mieste. Prvok je užitočný len vtedy, keď sú panely skutočnými rovnocennými partnermi a každý panel zostáva prítomný v počiatočnom HTML stránky.

Vykreslený stav zobrazuje jeden aktívny panel, ale ostatné dva panely sú tiež prítomné v objektovom modeli dokumentu (DOM) – štruktúrovanej reprezentácii stránky v prehliadači. Sú skryté pomocou natívneho atribútu hidden, nie načítané po kliknutí. Produkčný renderer pridáva správanie klávesnice a ukazovateľa popísané nižšie; zmluva o autorskom obsahu zostáva rovnaká naprieč platformami.

Prečo na tomto prvku záleží

Čitatelia filtrujú stránku podľa svojej roly, cieľa a úrovne zodpovednosti. Špecialista na obsah môže chcieť pokyny na tvorbu, SEO špecialista validačné pravidlá a vedúci tímu riadenie. Dobre označený prepínač osôb znižuje úsilie potrebné na preklad generických rád do „čo to znamená pre mňa?“. Zároveň udržiava spoločný základ na jednom mieste, čím sa vyhýba trom takmer identickým stránkam súťažiacim o rovnaký zámer.

Psychologickou výhodou je rozpoznanie oproti interpretácii. Čitateľ dokáže rozpoznať popis ako „SEO tímy“ rýchlejšie, než dokáže skenovať tri odseky, aby zistil, ktorý z nich sa ho týka. Záložky tiež zachovávajú priestorový kontext: panel sa mení na mieste, takže čitateľ môže porovnávať rovnocenné cesty bez opakovaného posúvania popri spoločnom úvode.

Toto pohodlie vytvára kompromis v oblasti strojovej extrahovateľnosti. Strojová extrahovateľnosť je schopnosť crawlera, vyhľadávacieho indexu, asistívnej technológie alebo systému na vyhľadávanie izolovať obsah pri zachovaní jeho témy a vzťahov. Viditeľné nadpisy a odseky sa zobrazujú v zrejmom poradí čítania. Panely záložiek zavádzajú stav interakcie: jeden je viditeľný, niekoľko nie a softvér musí spojiť každý popis záložky so správnym panelom. Slabá implementácia ponechá v HTML len aktívny panel, načíta ostatné panely až po kliknutí alebo opakuje generické nadpisy ako „Výhody“ bez názvu osoby. V každom prípade stroj dostáva menej kontextu, než vidí čitateľ.

Aj správna implementácia môže znížiť extrahovateľnosť v porovnaní s bežnými sekciami. Niektoré systémy uprednostňujú pôvodne viditeľný text, zjednodušujú interaktívne vzťahy alebo vynechávajú skrytý obsah z úryvkov. Záložky sú preto nástrojom na smerovanie informácií, nie spôsobom, ako skryť základné odpovede. Umiestnite spoločnú odpoveď, definíciu, varovanie, podmienku oprávnenosti a záver mimo sady záložiek. Panely používajte na aplikácie špecifické pre publikum, príklady, pracovné postupy alebo dôkazy, ktoré zostávajú užitočné po zistení spoločnej odpovede.

Aplikujte pravidlá písania prvkov : najprv napíšte úplné vysvetlenie, potom klasifikujte skutočnú sadu rovnocenných ciest čitateľov ako tento typovaný prvok. Pravidlá na tejto stránke majú prednosť pre mapovanie panelov, interakciu a limity obsahu.

Kedy ho použiť

Použite prepínač záložiek/osôb, keď sú splnené všetky tieto podmienky:

1. Dve až päť rozpoznateľných skupín publika, kontextov alebo režimov potrebuje rôzne aplikácie tej istej témy.
2. Každý panel odpovedá na rovnakú otázku v porovnateľnej hĺbke.
3. Väčšina čitateľov potrebuje jeden panel naraz, zatiaľ čo menšina môže porovnávať dva alebo viac.
4. Spoločnú odpoveď možno uviesť mimo prvku bez toho, aby čitateľ musel otvoriť každú záložku.
5. Udržanie ciest na jednej stránke je prehľadnejšie ako udržiavanie samostatných stránok s do značnej miery duplicitnými úvodmi.

Silné použitia zahŕňajú implementačné usmernenia pre „Vývojári / Editori / Recenzenti“, cesty onboarding-u pre „Sólo / Tím / Agentúra“ a jednu schopnosť vysvetlenú cez „Plánuj / Produkuj / Meraj“. Popisky osôb by mali odrážať zmysluplné rozdiely v pracovnom postupe, dôkazoch, oprávneniach alebo požadovanom výsledku – nie demografické odhady.

Prípady tesne mimo cieľ často pochádzajú z pokusov skrátiť stránku. Neumiestňujte postupné kroky do záložiek; skrytie kroku dva, kým si ho čitateľ nevyberie, ničí poradie postupu. Nezáložkujte krátky zoznam definícií, pretože bežné nadpisy zobrazujú rovnaké informácie s menšou interakciou. Nepoužívajte záložky na podrobné porovnanie funkcií: porovnávacia tabuľka udržiava kritériá súčasne viditeľné. Nepoužívajte záložky ako navigáciu medzi nesúvisiacimi témami a nerozdeľujte informácie len preto, že stránka pôsobí dlho.

Akordeón je vhodnejší, keď sú sekcie nezávislé otázky vo vertikálnom toku čítania alebo keď by malo zostať otvorených niekoľko odpovedí. Samostatné stránky sú lepšie, keď každé publikum potrebuje odlišný vyhľadávací zámer, názov, sadu dôkazov, konverznú cestu alebo viac ako približne 300 slov jedinečného obsahu. Ak čitateľ potrebuje všetky panely na bezpečné alebo správne konanie, záložky sú nesprávny komponent.

Kde ho umiestniť

Umiestnite prepínač po spoločnej odpovedi a odseku, ktorý vysvetľuje, prečo sa cesty líšia. Čitateľ by mal pochopiť spoločnú tému pred výberom popisku. Na stránke produktu alebo riešenia to zvyčajne znamená po základnej hodnote produktu a vysvetlení spoločných schopností, ale pred podrobnými dôkazmi a primárnym záverečným konaním. V dokumentácii ho umiestnite bezprostredne pred rolové inštrukcie, ktoré riadi.

Neumiestňujte sadu záložiek pred priamu odpoveď stránky, definíciu alebo povinné varovanie. Neumiestňujte ju medzi tvrdenie a jeho zdroj, medzi predpoklad a postup, ktorý riadi, ani medzi cenu a jej kvalifikácie. Tieto vzťahy musia prežiť aj vtedy, keď nie je vybratý žiadny panel. Sada záložiek nesmie byť vedľa inej sady záložiek, akordeónu, veľkej porovnávacej mriežky alebo karuselu; susedné interakčné modely vytvárajú konkurujúce si ovládacie prvky a nejasné poradie čítania.

Vyhýbajte sa vnoreným záložkám. Vonkajšia voľba skrýva vnútornú voľbu, vytvára náročné správanie klávesnice a robí hĺbkové odkazy nejednoznačnými. Tiež sa vyhýbajte umiestneniu prepínača osôb bezprostredne nad iným výberom publika vo formulári alebo CTA. Ak oba ovládacie prvky používajú podobné popisky, čitatelia nemusia vedieť, či menia viditeľný obsah alebo odosielajú preferenciu.

Anatómia

Anatómia má jeden označený kontajner, jeden usporiadaný zoznam záložiek a jeden panel pre každú záložku. Snímka obrazovky musí zobrazovať neaktívne panely v DOM inšpektore aj viditeľný stav, pretože prítomnosť v zdroji je súčasťou prvku, nie detailom implementácie.

1. Spoločný názov: Uvádza spoločnú otázku alebo úlohu, ktorou sa každý panel zaoberá.
2. Zoznam záložiek: Zoskupuje dva až päť rovnocenných popiskov v stabilnom autorskom poradí.
3. Popis záložky: Pomenúva publikum, kontext alebo režim jazykom, ktorý čitatelia rozpoznajú.
4. Vybraný stav: Komunikuje aktívnu záložku prostredníctvom textovej sémantiky a viditeľného spracovania, nie len farbou.
5. Panel: Obsahuje samostatný nadpis a obsah pre jeden popis.
6. Programový vzťah: aria-controls na záložke a aria-labelledby na paneli spájajú každý pár.
7. Záložné poradie: Udržiava spoločný názov, popisky a všetok obsah panelov zmysluplný, keď sa nespúšťajú skripty ani štýly.

Medzery, okraje, tvar indikátora, animácia a zlomový bod patria do rendereru. Autori kontrolujú popisky, zdrojové poradie, obsah panelov a voliteľný stabilný identifikátor fragmentu.

Príklady dizajnu

Komponent podporuje štyri varianty. Každý variant používa rovnaký model obsahu a požiadavku DOM.

Osobové záložky: Použite rolové popisky, keď sa pracovné postupy, dôkazy alebo ďalšie kroky skutočne líšia podľa čitateľa. Uprednostnite zavedený jazyk zákazníkov ako „Interné tímy“ pred vymyslenými osobnosťami ako „Guru rastu“.

Kontextové záložky: Použite neosobové stavy ako veľkosť tímu, prevádzkový model alebo režim implementácie. Spoločný názov musí pomenovať meniacu sa dimenziu, aby sa popisky nezamieňali s navigáciou stránky.

Vertikálne záložky: Používajte len vtedy, keď popisky potrebujú viac horizontálneho priestoru a nie je ich viac ako päť. Poradie DOM a klávesnice zostáva záložka jedna až päť, nasledované ich príslušnými panelmi podľa zvolenej prístupnej implementácie.

Úzky výrez a záložný stav: Popisky sa môžu posúvať horizontálne, keď je pretečenie zrejmé z viditeľného signálu, alebo renderer môže zobraziť panely ako naskladané označené sekcie. Nesmie skracovať popisky na nejednoznačné fragmenty ani odstraňovať neaktívny obsah z HTML.

Parametre

Obsahová zmluva udržiava vzťah explicitný, pričom vizuálne a responzívne správanie ponecháva na renderer.

Popisky sú atribúty, pretože ovládajú ovládací prvok; názvy panelov pochádzajú z prvého nadpisu, pretože patria k obsahu. Tieto dve hodnoty môžu byť podobné, ale stručný popis záložky môže mapovať na plnší, extrahovateľný nadpis panelu. Telá panelov umožňujú odseky, krátky zoznam, vložený kód, jeden obrázok a jednu kontextovú akciu. Nepovoľujú ďalšiu sadu záložiek, akordeón, dátovú tabuľku, formulár, videoprehrávač ani viackrokový postup.

Syntax a príklady kódu

Všetky tri zápisy zachovávajú jeden názov, usporiadané popisky, nadpisy panelov, telá panelov, stabilné ID a počiatočnú predvolenú hodnotu. Prenosná Markdown direktíva je kanonická autorská forma.

Prenosná Markdown direktíva

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Vyberte si svoj tím

::item{label="Content tímy" id=content-teams}
### Premieňte zadanie na opakovateľný koncept

Začnite s požadovanou odpoveďou, dôkazmi a sadou prvkov. Vypracujte úvahy v plnom rozsahu pred aplikovaním komponentov.
::

::item{label="SEO tímy" id=seo-teams}
### Overte objaviteľnosť a extrahovateľnosť

Skontrolujte vykreslené HTML, interné odkazy, nadpisy a štruktúrované polia. Potvrďte, že každý panel prichádza v počiatočnej odpovedi.
::

::item{label="Vedúci tímov" id=team-leaders}
### Posúďte systém, nielen stránku

Schváľte spoločný prísľub raz, potom preskúmajte, kde každé publikum skutočne potrebuje iný pracovný postup, dôkaz alebo ďalší krok.
::
:::

Prvý nadpis nadradeného tela mapuje na title. Každá vnorená položka preberá label a id z atribútov, mapuje svoj prvý nadpis na item.title a zvyšok na item.content.

Hugo shortcode

{{< tabs-persona-switcher title="Choose your team" default="content-teams" variant="horizontal" >}}
  {{< tab-item label="Content teams" id="content-teams" title="Turn the brief into a repeatable draft" >}}
  Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.
  {{< /tab-item >}}
  {{< tab-item label="SEO teams" id="seo-teams" title="Verify discovery and extraction" >}}
  Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.
  {{< /tab-item >}}
  {{< tab-item label="Team leaders" id="team-leaders" title="Review the system, not just the page" >}}
  Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

Adaptér používa iba pomenované parametre. Musí vykresliť všetky telá položiek počas odpovede servera, odmietnuť duplicitné ID a inicializovať interakciu bez prepísania modelu obsahu.

WordPress blok

<!-- wp:amicited/tabs-persona-switcher {"title":"Choose your team","default":"content-teams","variant":"horizontal"} -->
  <!-- wp:amicited/tab-item {"label":"Content teams","id":"content-teams","title":"Turn the brief into a repeatable draft"} -->
  <p>Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"SEO teams","id":"seo-teams","title":"Verify discovery and extraction"} -->
  <p>Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Team leaders","id":"team-leaders","title":"Review the system, not just the page"} -->
  <p>Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPress by mal obmedziť vnorené bloky na registrované položky záložiek. Náhľad, uložený markup a front-end vykreslenie musia zachovať každý panel; pohodlie editora nesmie zmeniť neaktívne položky na obsah načítaný klientom.

Príklady

Dobrý príklad

Vyberte si spôsob implementácie

Hostovaná platforma — Spustite bez údržby infraštruktúry

Pripojte schválený zdroj údajov, nakonfigurujte roly a overte výstup v staging prostredí. Dodávateľ udržiava aktualizácie behu a monitorovanie; váš tím vlastní schvaľovanie obsahu a kontrolu prístupu.

Vlastný hosting — Kontrolujte nasadenie a hranice údajov

Nasaďte podporovaný balík vo svojom prostredí, pripojte rovnaký schválený zdroj údajov a určite vlastníka pre aktualizácie, monitorovanie, zálohovanie a kontrolu prístupu.

Toto funguje, pretože oba panely odpovedajú na rovnakú implementačnú otázku, pomenúvajú prevádzkový rozdiel a obsahujú porovnateľné zodpovednosti. „Hostovaná platforma“ a „Vlastný hosting“ sú rozpoznateľné popisky. Spoločné rozhodnutie zostáva jasné, ak sú oba panely zjednotené do zdrojového poradia.

Zlý príklad

Preskúmajte všetko

Prehľad: Naša platforma robí moderné tímy efektívnejšími.

Cenník: Kontaktujte obchodné oddelenie pre personalizovanú cenovú ponuku a dôležité zmluvné podmienky.

Bezpečnosť: Prečítajte si našu bezpečnostnú dokumentáciu.

Kariéra: Pridajte sa k nášmu rastúcemu tímu.

Toto je navigácia stránky prezlečená za záložky. Panely neodpovedajú na jednu spoločnú otázku, popisky miešajú informácie pre kupujúcich s firemným obsahom a dôležité cenové podmienky sú skryté za interakciou. Nahraďte sadu bežnými sekciami stránky a skutočnou navigáciou. Ak cenové možnosti potrebujú súčasné vyhodnotenie, použite cenovú alebo porovnávaciu štruktúru namiesto záložiek.

Schema markup a prístupnosť

Záložky a prepínače osôb nevytvárajú vyhradený typ Schema.org. Ich obsah zostáva súčasťou obaľujúceho Article, TechArticle, Product alebo WebPage, keď daná stránka nezávisle spĺňa podmienky. Neoznačujte záložky ako ItemList len preto, že sú opakované, a negenerujte viacero entít Person z popiskov osôb. Popis ako „Agentúra“ opisuje cestu čitateľa, nie faktické vyhlásenie o entite.

Používajte WAI-ARIA vzor záložiek len vtedy, keď sa rozhranie skutočne správa ako záložky. Kontajner má role="tablist"; každý ovládací prvok má role="tab", jedinečné ID, aria-controls a presnú hodnotu aria-selected; každý panel má role="tabpanel" a aria-labelledby. Používajte tlačidlá pre ovládacie prvky, nie odkazy s falošnými cieľmi. Vybraná záložka patrí do poradia záložiek stránky; neaktívne záložky používajú rovingové tabindex="-1" a zostávajú dosiahnuteľné pomocou šípok. Home a End presúvajú na prvú a poslednú záložku. Aktivácia môže nasledovať za fokusom len vtedy, keď je prepínanie panelov okamžité; inak Enter alebo Medzerník aktivuje zaostrenú záložku.

Fokus musí zostať predvídateľný. Výber záložky automaticky nepresúva fokus do jej panela. Panel môže použiť tabindex="0", keď jeho prvý obsah nie je inak zaostriteľný, čo umožňuje používateľom klávesnice vstúpiť doň. Viditeľný indikátor fokusu a indikátor výberu sa musia líšiť a ani jeden sa nesmie spoliehať len na farbu.

Všetky panely musia byť vykreslené v počiatočnej HTML odpovedi. Skrytie neaktívnych panelov pomocou hidden, CSS alebo progresívne vylepšeného ekvivalentu je prijateľné; ich vytvorenie až po kliknutí nie je. Bez JavaScriptu musí záložné riešenie zobraziť každý označený panel v zdrojovom poradí alebo poskytnúť skutočné odkazy na serverom vykreslené ciele. Stabilné fragmenty môžu aktivovať panel, ale kanonická stránka zostáva jednou URL. Otestujte priblíženie, úzke obrazovky, dlhé preložené popisky, vzťahy v čítačkách obrazovky, poradie klávesnice a zlyhanie skriptov.

Pravidlá písania

Začnite so spoločnou otázkou. Ak každý navrhovaný panel odpovedá na inú otázku, nepoužívajte záložky. Napíšte dve až päť položiek, pričom tri alebo štyri sú preferované. Udržujte popisky na jednej až štyroch slovách a v ideálnom prípade do 28 znakov. Používajte paralelnú gramatiku: všetky roly (“Editori / Recenzenti”), všetky režimy (“Hostované / Vlastný hosting”) alebo všetky fázy (“Plánuj / Produkuj / Meraj”). Nemiešajte rolu, sloveso a marketingovú frázu.

Každému panelu dajte 3–10 slovný nadpis, ktorý pomenúva príslušnú cestu aj jej výsledok, keď samotný popis záložky nestačí. Napíšte 40–180 slov na panel, pričom 300 je absolútne maximum. Panely by mali mať porovnateľnú hĺbku, ale nemusia mať rovnaký počet slov. Používajte priamy jazyk a konkrétne rozdiely v úlohách, dôkazoch, oprávneniach, obmedzeniach alebo akciách. Zmena iba zámen z „vy“ na „váš tím“ neospravedlňuje ďalší panel.

Spoločné informácie uchovávajte mimo prvku. Opakovanie rovnakej úvodnej vety v každom paneli vytvára odchýlky v údržbe a spôsobuje, že extrahované pasáže vyzerajú duplicitne. Umiestnite rozdiely do panelov a každý rozdiel uveďte dostatočne explicitne, aby prežil extrakciu. Uprednostnite „Agentúrne tímy môžu prideľovať roly na úrovni klienta“ pred „Máte väčšiu kontrolu“, čo stráca svoj subjekt, keď je oddelené od vybraného popisku.

Nikdy neumiestňujte do sady záložiek:

• Jedinú definíciu stránky, priamu odpoveď, záver, bezpečnostné varovanie, právnu kvalifikáciu, pravidlo oprávnenosti alebo atribúciu zdroja.
• Postupné kroky, ktoré musí každý čitateľ dokončiť, alebo predpoklady, ktoré riadia obsah mimo jedného panelu.
• Ďalšiu sadu záložiek, akordeón, karusel, komplexnú dátovú tabuľku, viacpoľový formulár alebo automaticky prehrávané médiá.
• Viac ako jednu primárnu výzvu na akciu na panel alebo akcie vedúce do nesúvisiacich fáz konverzného lievika.
• Obsah načítaný až po interakcii, aj keď je stav načítania pre ľudského používateľa rýchly.
• Popisky ako „Iné“, „Viac“, „Všeobecné“ alebo „Zdroje“, ktoré skrývajú nedefinovaný vzťah.

Ak každý panel presahuje 300 slov, potrebuje vlastnú sadu dôkazov alebo cieli na iný vyhľadávací zámer, publikujte samostatné sekcie alebo stránky. Ak čitatelia potrebujú porovnať niekoľko kritérií naraz, použite tabuľku. Ak je obsah iba voliteľným detailom, použite prózu alebo akordeón podľa vzťahu.

Typy príspevkov, ktoré ho používajú

Pole postTypes v frontmatter je zdrojom pre túto tabuľku. Zahrnutie znamená, že formát môže podporovať záložky; nerobí ich povinnými.

QA kontrolný zoznam

• Jedna spoločná otázka: Každý panel odpovedá na rovnakú ohraničenú otázku pre iné publikum, kontext alebo režim.
• Primeraný počet: Sada obsahuje dve až päť záložiek, najlepšie tri alebo štyri, so stručnými paralelnými popiskami.
• Viditeľná spoločná odpoveď: Definícia, základná odpoveď, povinná kvalifikácia a záver zostávajú mimo sady záložiek.
• Prítomnosť v počiatočnom DOM: Každý panel a jeho kompletný autorský obsah sa nachádza v počiatočnom serverom vykreslenom HTML.
• Explicitný kontext: Každý nadpis panelu a úvodná veta zostávajú zrozumiteľné, keď sú extrahované bez vizuálneho stavu záložky.
• Správne vzťahy: ID záložiek a panelov sú jedinečné; aria-controls a aria-labelledby ich správne pária.
• Správanie klávesnice: Správanie šípok, Home, End, Enter, Medzerníka, Tab a Shift+Tab zodpovedá zvolenému modelu aktivácie.
• Jasnosť fokusu: Fokus a výber sú viditeľne odlišné a výber nepresúva fokus neočakávane.
• Stabilné záložné riešenie: Zlyhanie skriptu zobrazí označený obsah alebo použiteľné serverom vykreslené ciele bez straty informácií.
• Responzívne správanie: Popisky zostávajú úplné a objaviteľné pri úzkej šírke, 200% priblížení a s dlhším preloženým textom.
• Bezpečné umiestnenie: Komponent neoddeľuje tvrdenie od dôkazu, varovanie od jeho rozsahu ani predpoklady od inštrukcií.
• Žiadne komplexné vnorenie: Panely obsahujú ohraničenú prózu a jednoduchý podporný obsah, nie ďalší interakčný systém.
• Schema zdržanlivosť: Renderer nevytvára z prezentačných popiskov schema pre zoznam, osobu alebo publikum.
• Rovnocennosť zápisu: Markdown, Hugo a WordPress zachovávajú rovnaké poradie, ID, predvolené hodnoty, popisky, nadpisy a telá panelov.

Recenzent by mal komponent odmietnuť, keď neaktívny obsah vyžaduje sieťovú požiadavku spúšťanú kliknutím, keď základné informácie existujú len v jednom paneli alebo keď popisky neopisujú rovnocenné cesty. Toto sú zlyhania obsahu a architektúry; vizuálne vylepšenie ich nemôže napraviť.

FAQ

Štruktúrované FAQ záznamy v frontmatter sa týkajú indexovania, URL fragmentov, počtu záložiek, výziev na akciu a rozdielu medzi záložkami a akordeónom. Sú zámerne mimo interaktívneho prvku, aby každý čitateľ a renderer dostal rovnaké implementačné usmernenie.