Comutator de File / Persona: Format, Reguli și Exemple

Un comutator de file/persona oferă mai multor cititori trasee distincte printr-un subiect delimitat, fără a-i trimite pe pagini separate. Etichetele identifică traseul; selectarea uneia dezvăluie panoul său în aceeași locație. Elementul este util doar atunci când panourile sunt cu adevărat perechi și fiecare panou rămâne prezent în HTML-ul inițial al paginii.

Starea redată arată un panou activ, dar celelalte două panouri sunt de asemenea în modelul obiectual al documentului (DOM) — reprezentarea structurată a paginii în browser. Ele sunt ascunse cu atributul nativ hidden, nu sunt solicitate după un clic. Un motor de redare de producție adaugă comportamentul de tastatură și pointer descris mai jos; contractul de conținut scris rămâne același pe toate platformele.

De ce contează acest element

Cititorii filtrează o pagină prin rolul, obiectivul și nivelul lor de responsabilitate. Un specialist în conținut poate dori instrucțiuni de redactare, un specialist SEO poate dori reguli de validare, iar un lider de echipă poate dori guvernanță. Un comutator de persona bine etichetat reduce efortul de a traduce sfaturile generice în „ce înseamnă asta pentru mine?" De asemenea, păstrează premisa comună într-un singur loc, ceea ce evită trei pagini aproape identice care concurează pentru aceeași intenție.

Avantajul psihologic este recunoașterea în locul interpretării. Un cititor poate recunoaște o etichetă precum „Echipe SEO" mai repede decât poate scana trei paragrafe pentru a deduce care i se aplică. Filele păstrează și contextul spațial: panoul se schimbă pe loc, astfel încât cititorul poate compara traseele pereche fără a derula în mod repetat peste introducerea comună.

Această comoditate creează un compromis privind extractibilitatea automată. Extractibilitatea automată este capacitatea unui crawler, index de căutare, tehnologie de asistență sau sistem de regăsire de a izola conținutul, păstrând în același timp subiectul și relațiile acestuia. Titlurile și paragrafele vizibile apar într-o succesiune de lectură evidentă. Panourile filelor introduc o stare de interacțiune: unul este vizibil, mai multe nu, iar software-ul trebuie să conecteze fiecare etichetă de filă la panoul corect. O implementare slabă lasă doar panoul activ în HTML, încarcă celelalte panouri după un clic sau repetă titluri generice precum „Beneficii" fără numele persona. În fiecare caz, o mașină primește mai puțin context decât vede cititorul.

Chiar și o implementare corectă poate reduce extractibilitatea în comparație cu secțiunile obișnuite. Unele sisteme prioritizează textul inițial vizibil, aplatizează relațiile interactive sau omit conținutul ascuns din extrase. Filele sunt, așadar, un instrument de rutare a informațiilor, nu o modalitate de a ascunde răspunsuri esențiale. Plasează răspunsul comun, definiția, avertismentul, condiția de eligibilitate și concluzia în afara setului de file. Folosește panourile pentru aplicații specifice publicului, exemple, fluxuri de lucru sau dovezi care rămân utile după ce răspunsul comun este cunoscut.

Aplică regulile de scriere a elementelor : redactează mai întâi explicația completă, apoi clasifică un set autentic de trasee pereche de cititori ca acest element tipizat. Regulile din această pagină au prioritate pentru maparea panourilor, interacțiune și limitele de conținut.

Când să îl folosești

Folosește un comutator de file/persona atunci când toate aceste condiții sunt îndeplinite:

1. Două până la cinci audiențe, contexte sau moduri recognoscibile au nevoie de aplicații diferite ale aceluiași subiect.
2. Fiecare panou răspunde la aceeași întrebare cu o profunzime comparabilă.
3. Majoritatea cititorilor au nevoie de un panou odată, în timp ce o minoritate poate compara două sau mai multe.
4. Răspunsul comun poate fi formulat în afara elementului fără a forța cititorul să deschidă fiecare filă.
5. Păstrarea traseelor pe o singură pagină este mai clară decât menținerea unor pagini separate cu introduceri în mare parte duplicate.

Utilizări potrivite includ ghidaje de implementare pentru „Developeri / Editori / Revizuitori," trasee de integrare pentru „Solo / Echipă / Agenție," și o capacitate explicată prin „Planifică / Produce / Măsoară." Etichetele persona ar trebui să reflecte diferențe semnificative în fluxul de lucru, dovezi, permisiuni sau rezultatul dorit — nu presupuneri demografice.

Cazurile aproape reușite vin adesea din încercarea de a scurta o pagină. Nu pune pași secvențiali în file; ascunderea pasului doi până când cititorul îl selectează distruge ordinea procedurii. Nu pune într-o filă o listă scurtă de definiții, deoarece titlurile obișnuite expun aceleași informații cu mai puțină interacțiune. Nu folosi file pentru o comparație detaliată de caracteristici: un tabel comparativ menține criteriile simultan vizibile. Nu folosi file ca navigare între subiecte fără legătură și nu împărți informațiile doar pentru că pagina pare lungă.

Un acordeon este mai potrivit atunci când secțiunile sunt întrebări independente într-un flux de lectură vertical sau când mai multe răspunsuri ar trebui să rămână deschise. Paginile separate sunt mai bune atunci când fiecare audiență are nevoie de o intenție de căutare, titlu, set de dovezi, traseu de conversie distinct sau de mai mult de aproximativ 300 de cuvinte de conținut unic. Dacă un cititor are nevoie de toate panourile pentru a acționa în siguranță sau corect, filele sunt componenta greșită.

Unde să îl plasezi

Plasează comutatorul după răspunsul comun și paragraful care explică de ce traseele diferă. Cititorul ar trebui să înțeleagă subiectul comun înainte de a alege o etichetă. Pe o pagină de produs sau soluție, asta înseamnă de obicei după propunerea de valoare centrală și explicația capacității comune, dar înainte de dovezile detaliate și acțiunea principală de încheiere. În documentație, plasează-l imediat înaintea instrucțiunilor specifice rolului pe care le controlează.

Nu plasa un set de file înaintea răspunsului direct al paginii, al definiției sau al avertismentului obligatoriu. Nu îl pune între o afirmație și sursa sa, între o cerință prealabilă și procedura pe care o guvernează, sau între un preț și calificările sale. Acele relații trebuie să supraviețuiască chiar și atunci când niciun panou nu este selectat. Un set de file nu poate sta lângă un alt set de file, un acordeon, un grilaj mare de comparație sau un carusel; modelele de interacțiune adiacente creează comenzi concurente și o ordine de citire neclară.

Evită filele imbricate. Alegerea exterioară ascunde alegerea interioară, creează un comportament dificil la tastatură și face deep linking-ul ambiguu. Evită, de asemenea, plasarea unui comutator de persona imediat deasupra unui alt selector de audiență într-un formular sau CTA. Dacă ambele comenzi folosesc etichete similare, cititorii s-ar putea să nu știe dacă schimbă conținutul vizibil sau trimit o preferință.

Anatomie

Anatomia are un container etichetat, o listă ordonată de file și un panou pentru fiecare filă. Captura de ecran trebuie să arate panourile inactive în inspectorul DOM, precum și starea vizibilă, deoarece prezența în sursă face parte din element, nu este un detaliu de implementare.

1. Titlu comun: Enunță întrebarea sau sarcina comună pe care o adresează fiecare panou.
2. Lista de file: Grupează două până la cinci etichete pereche într-o ordine stabilă de autorat.
3. Eticheta filei: Denumește o audiență, un context sau un mod într-un limbaj pe care cititorii îl recunosc.
4. Stare selectată: Comunică fila activă prin semantica textului și un tratament vizibil, nu doar prin culoare.
5. Panou: Conține un titlu autonom și conținutul pentru o etichetă.
6. Relație programatică: aria-controls pe filă și aria-labelledby pe panou conectează fiecare pereche.
7. Ordine de rezervă: Menține titlul comun, etichetele și tot conținutul panourilor semnificative atunci când scripturile sau stilizarea nu rulează.

Spațierea, bordura, forma indicatorului, animația și punctul de întrerupere aparțin motorului de redare. Autorii controlează etichetele, ordinea sursei, conținutul panourilor și un identificator opțional de fragment stabil.

Exemple de design

Componenta suportă patru variante. Fiecare variantă folosește același model de conținut și aceeași cerință DOM.

File persona: Folosește etichete de rol atunci când fluxurile de lucru, dovezile sau acțiunile următoare diferă cu adevărat în funcție de cititor. Preferă limbajul consacrat al clienților, precum „Echipe interne," în locul personelor inventate, precum „Guru ai creșterii."

File de context: Folosește stări non-persona, cum ar fi dimensiunea echipei, modelul operațional sau modul de implementare. Titlul comun trebuie să numească dimensiunea care se schimbă, astfel încât etichetele să nu fie confundate cu navigarea paginii.

File verticale: Folosește-le doar atunci când etichetele au nevoie de mai mult spațiu orizontal și nu sunt mai mult de cinci. Ordinea DOM și tastatură rămâne fila unu până la fila cinci, urmate de panourile lor asociate, conform implementării accesibile alese.

Stare ecran îngust și stare de rezervă: Etichetele pot derula orizontal atunci când un indiciu vizibil face revărsarea evidentă, sau motorul de redare poate expune panourile ca secțiuni etichetate stivuite. Nu trebuie să trunchieze etichetele în fragmente ambigue sau să elimine conținutul inactiv din HTML.

Parametri

Contractul de conținut menține relația explicită, lăsând în același timp comportamentul vizual și responsive în seama motorului de redare.

Etichetele sunt atribute deoarece operează controlul; titlurile panourilor provin din primul titlu deoarece aparțin conținutului. Cele două pot fi similare, dar o etichetă concisă de filă poate fi mapată la un titlu de panou mai amplu și extractibil. Corpurile panourilor permit paragrafe, o listă scurtă, cod inline, o imagine și o acțiune contextuală. Nu permit un alt set de file, acordeon, tabel de date, formular, player video sau procedură în mai mulți pași.

Sintaxă și exemple de cod

Toate cele trei notații păstrează un titlu, etichete ordonate, titluri de panouri, corpuri de panouri, ID-uri stabile și valoarea implicită inițială. Directiva Markdown portabilă este forma canonică de autorat.

Directivă Markdown portabilă

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Alege-ți echipa

::item{label="Echipe de conținut" id=content-teams}
### Transformă brief-ul într-o schiță reproductibilă

Începe cu răspunsul cerut, dovezile și setul de elemente. Redactează raționamentul în întregime înainte de a aplica componente.
::

::item{label="Echipe SEO" id=seo-teams}
### Verifică descoperirea și extracția

Inspectează HTML-ul redat, linkurile interne, titlurile și câmpurile structurate. Confirmă că fiecare panou sosește în răspunsul inițial.
::

::item{label="Lideri de echipă" id=team-leaders}
### Revizuiește sistemul, nu doar pagina

Aprobă promisiunea comună o dată, apoi revizuiește unde fiecare audiență are nevoie cu adevărat de un flux de lucru, punct de probă sau acțiune următoare diferit.
::
:::

Primul titlu al corpului părinte se mapează la title. Fiecare element imbricat preia label și id din atribute, mapează primul său titlu la item.title și restul la item.content.

Shortcode Hugo

{{< tabs-persona-switcher title="Alege-ți echipa" default="content-teams" variant="horizontal" >}}
  {{< tab-item label="Echipe de conținut" id="content-teams" title="Transformă brief-ul într-o schiță reproductibilă" >}}
  Începe cu răspunsul cerut, dovezile și setul de elemente. Redactează raționamentul în întregime înainte de a aplica componente.
  {{< /tab-item >}}
  {{< tab-item label="Echipe SEO" id="seo-teams" title="Verifică descoperirea și extracția" >}}
  Inspectează HTML-ul redat, linkurile interne, titlurile și câmpurile structurate. Confirmă că fiecare panou sosește în răspunsul inițial.
  {{< /tab-item >}}
  {{< tab-item label="Lideri de echipă" id="team-leaders" title="Revizuiește sistemul, nu doar pagina" >}}
  Aprobă promisiunea comună o dată, apoi revizuiește unde fiecare audiență are nevoie cu adevărat de un flux de lucru, punct de probă sau acțiune următoare diferit.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

Adaptorul folosește doar parametri numiți. Trebuie să redea toate corpurile elementelor în timpul răspunsului serverului, să respingă ID-urile duplicate și să inițializeze interacțiunea fără a rescrie modelul de conținut.

Bloc WordPress

<!-- wp:amicited/tabs-persona-switcher {"title":"Alege-ți echipa","default":"content-teams","variant":"horizontal"} -->
  <!-- wp:amicited/tab-item {"label":"Echipe de conținut","id":"content-teams","title":"Transformă brief-ul într-o schiță reproductibilă"} -->
  <p>Începe cu răspunsul cerut, dovezile și setul de elemente. Redactează raționamentul în întregime înainte de a aplica componente.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Echipe SEO","id":"seo-teams","title":"Verifică descoperirea și extracția"} -->
  <p>Inspectează HTML-ul redat, linkurile interne, titlurile și câmpurile structurate. Confirmă că fiecare panou sosește în răspunsul inițial.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Lideri de echipă","id":"team-leaders","title":"Revizuiește sistemul, nu doar pagina"} -->
  <p>Aprobă promisiunea comună o dată, apoi revizuiește unde fiecare audiență are nevoie cu adevărat de un flux de lucru, punct de probă sau acțiune următoare diferit.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPress ar trebui să limiteze blocurile interioare la elementele de file înregistrate. Previzualizarea, markupul salvat și redarea front-end trebuie să rețină fiecare panou; confortul editorului nu trebuie să transforme elementele inactive în conținut preluat de la client.

Exemple

Exemplu bun

Alege o cale de implementare

Platformă găzduită — Lansează fără a menține infrastructura

Conectează sursa de date aprobată, configurează rolurile și validează rezultatul într-un spațiu de lucru de testare. Furnizorul menține actualizările runtime și monitorizarea; echipa ta deține aprobarea conținutului și revizuirea accesului.

Auto-găzduit — Controlează implementarea și limitele datelor

Distribuie pachetul suportat în mediul tău, conectează aceeași sursă de date aprobată și desemnează un responsabil pentru upgrade-uri, monitorizare, copii de siguranță și revizuirea accesului.

Funcționează deoarece ambele panouri răspund la aceeași întrebare de implementare, numesc diferența operațională și conțin responsabilități comparabile. „Platformă găzduită" și „Auto-găzduit" sunt etichete recognoscibile. Decizia comună rămâne clară dacă ambele panouri sunt aplatizate în ordinea sursei.

Exemplu prost

Explorează totul

Prezentare generală: Platforma noastră face echipele moderne mai eficiente.

Prețuri: Contactează vânzările pentru o ofertă personalizată și condiții contractuale importante.

Securitate: Citește documentația noastră de securitate.

Cariere: Alătură-te echipei noastre în creștere.

Aceasta este navigare de site deghizată în file. Panourile nu răspund la o singură întrebare comună, etichetele amestecă informații pentru cumpărători cu conținut corporativ, iar condițiile importante de preț sunt ascunse în spatele unei interacțiuni. Înlocuiește setul cu secțiuni obișnuite de pagină și navigare reală. Dacă opțiunile de preț necesită evaluare simultană, folosește o structură de prețuri sau comparație, nu file.

Markup pentru scheme și accesibilitate

Filele și comutatoarele de persona nu creează un tip Schema.org dedicat. Conținutul lor rămâne parte din Article, TechArticle, Product sau WebPage în care se află, atunci când acea pagină se califică independent. Nu marca filele ca ItemList doar pentru că sunt repetate și nu genera entități Person multiple din etichetele persona. O etichetă precum „Agenție" descrie un traseu de cititor, nu o afirmație factuală de entitate.

Folosește modelul WAI-ARIA de file doar atunci când interfața se comportă efectiv ca file. Containerul are role="tablist"; fiecare control are role="tab", un ID unic, aria-controls și o valoare aria-selected corectă; fiecare panou are role="tabpanel" și aria-labelledby. Folosește butoane pentru controale, nu linkuri cu destinații false. Fila selectată aparține ordinii de tabulare a paginii; filele inactive folosesc tabindex="-1" rotativ și rămân accesibile cu tastele săgeată. Home și End mută la prima și ultima filă. Activarea poate urma focalizarea doar atunci când comutarea panoului este imediată; în caz contrar, Enter sau Spațiu activează fila focalizată.

Focalizarea trebuie să rămână predictibilă. Selectarea unei file nu împinge automat focalizarea în panoul său. Un panou poate folosi tabindex="0" atunci când primul său conținut nu este focalizabil altfel, permițând utilizatorilor de tastatură să intre în el. Un indicator vizibil de focalizare și un indicator de selecție trebuie să difere și niciunul nu se poate baza doar pe culoare.

Toate panourile trebuie redate în răspunsul HTML inițial. Ascunderea panourilor inactive cu hidden, CSS sau un echivalent progresiv îmbunătățit este acceptabilă; crearea lor doar după un clic nu este. Fără JavaScript, sistemul de rezervă trebuie să expună fiecare panou etichetat în ordinea sursei sau să ofere linkuri reale către destinații redate pe server. Fragmentele stabile pot activa un panou, dar pagina canonică rămâne un singur URL. Testează zoomul, ecranele înguste, etichetele lungi traduse, relațiile cititorului de ecran, ordinea tastaturii și defectarea scripturilor.

Reguli de scriere

Începe cu întrebarea comună. Dacă fiecare panou propus răspunde la o întrebare diferită, nu folosi file. Scrie între două și cinci elemente, cu trei sau patru preferate. Păstrează etichetele la unu până la patru cuvinte și 28 de caractere acolo unde este posibil. Folosește gramatică paralelă: toate rolurile („Editori / Revizuitori"), toate modurile („Găzduit / Auto-găzduit") sau toate etapele („Planifică / Produce / Măsoară"). Nu amesteca un rol, un verb și o frază de marketing.

Oferă fiecărui panou un titlu de 3–10 cuvinte care numește atât traseul relevant, cât și rezultatul său atunci când eticheta filei singură este insuficientă. Scrie 40–180 de cuvinte per panou, cu 300 ca maxim absolut. Panourile ar trebui să aibă profunzime comparabilă, dar nu au nevoie de numere identice de cuvinte. Folosește limbaj direct și diferențe concrete în sarcini, dovezi, permisiuni, constrângeri sau acțiuni. Schimbarea doar a pronumelor din „tu" în „echipa ta" nu justifică un alt panou.

Păstrează informațiile comune în afara elementului. Repetarea aceleiași fraze de deschidere în fiecare panou creează derive de întreținere și face ca pasajele extrase să pară duplicate. Pune diferențele în interiorul panourilor și fiecare diferență suficient de explicită pentru a supraviețui extracției. Preferă „Echipele de agenție pot atribui roluri la nivel de client" în locul „Ai mai mult control," care își pierde subiectul atunci când este separat de eticheta selectată.

Nu pune niciodată acestea în interiorul unui set de file:

• Singura definiție a paginii, răspunsul direct, concluzia, avertismentul de siguranță, calificarea legală, regula de eligibilitate sau atribuirea sursei.
• Pași secvențiali pe care fiecare cititor trebuie să îi completeze, sau cerințe prealabile care guvernează conținutul din afara unui panou.
• Un alt set de file, acordeon, carusel, tabel de date complex, formular cu mai multe câmpuri sau media cu redare automată.
• Mai mult de un îndemn principal la acțiune per panou, sau acțiuni care duc la etape de pâlnie fără legătură.
• Conținut încărcat doar după interacțiune, chiar și atunci când starea de încărcare este rapidă pentru un utilizator uman.
• Etichete precum „Altele," „Mai multe," „General" sau „Resurse" care ascund o relație nedefinită.

Dacă fiecare panou depășește 300 de cuvinte, are nevoie de propriul set de dovezi sau vizează o intenție de căutare diferită, publică secțiuni sau pagini dedicate. Dacă cititorii au nevoie să compare mai multe criterii simultan, folosește un tabel. Dacă conținutul este doar un detaliu opțional, folosește proză sau un acordeon în funcție de relație.

Tipuri de postări care îl folosesc

Câmpul postTypes din frontmatter este sursa acestui tabel. Includerea înseamnă că formatul poate suporta file; nu le face obligatorii.

Checklist QA

• O singură întrebare comună: Fiecare panou răspunde la aceeași întrebare delimitată pentru o audiență, context sau mod diferit.
• Număr adecvat: Setul conține două până la cinci file, de preferință trei sau patru, cu etichete paralele concise.
• Răspuns comun vizibil: Definiția, răspunsul central, calificarea obligatorie și concluzia rămân în afara setului de file.
• Prezență inițială în DOM: Fiecare panou și conținutul său complet scris apare în HTML-ul redat inițial de server.
• Context explicit: Fiecare titlu de panou și frază de deschidere rămân de înțeles atunci când sunt extrase fără starea vizuală a filei.
• Relații corecte: ID-urile filelor și panourilor sunt unice; aria-controls și aria-labelledby le perechează corect.
• Comportament la tastatură: Comportamentul tastelor Săgeată, Home, End, Enter, Spațiu, Tab și Shift+Tab se potrivește cu modelul de activare ales.
• Claritatea focalizării: Focalizarea și selecția sunt vizibil distincte, iar selecția nu mută focalizarea în mod neașteptat.
• Sistem de rezervă stabil: Defectarea scripturilor expune conținut etichetat sau destinații redate pe server utilizabile, fără a pierde informații.
• Comportament responsive: Etichetele rămân complete și descoperibile la lățimi înguste, zoom de 200% și cu text tradus mai lung.
• Amplasare sigură: Componenta nu separă o afirmație de dovezi, un avertisment de domeniul său de aplicare sau cerințe prealabile de instrucțiuni.
• Fără imbricare complexă: Panourile conțin proză delimitată și conținut simplu de suport, nu un alt sistem de interacțiune.
• Reținere în scheme: Motorul de redare nu inventează scheme de listă, persoană sau audiență din etichetele de prezentare.
• Paritate a notației: Markdown, Hugo și WordPress păstrează aceeași ordine, ID-uri, valoare implicită, etichete, titluri și corpuri de panouri.

Un revizor ar trebui să respingă componenta atunci când conținutul inactiv necesită o cerere de rețea declanșată de clic, când informațiile esențiale există doar în interiorul unui singur panou sau când etichetele nu descriu trasee pereche. Acestea sunt eșecuri de conținut și arhitectură; rafinamentul vizual nu le poate repara.

FAQ

Intrările FAQ structurate din frontmatter abordează indexarea, URL-urile cu fragmente, numărul de file, îndemnurile la acțiune și distincția dintre file și acordeoane. Ele sunt intenționat în afara elementului interactiv, astfel încât fiecare cititor și motor de redare să primească aceleași îndrumări de implementare.