Flikar / Personväxlare: Format, Regler och Exempel

En flik-/personväxlare ger flera läsare distinkta vägar genom ett avgränsat ämne utan att skicka dem till separata sidor. Etiketterna identifierar vägen; att välja en visar dess panel på samma plats. Elementet är endast användbart när panelerna är verkliga paralleller och varje panel fortfarande finns i sidans ursprungliga HTML.

Det renderade tillståndet visar en aktiv panel, men de andra två panelerna finns också i dokumentobjektmodellen (DOM) – webbläsarens strukturerade representation av sidan. De är dolda med det inbyggda attributet hidden, inte efterfrågade efter ett klick. En produktionsrenderare lägger till tangentbords- och pekbeteendet som beskrivs nedan; det skrivna innehållskontraktet förblir detsamma över plattformar.

Varför detta element är viktigt

Läsare filtrerar en sida utifrån sin roll, sitt mål och sin ansvarsnivå. En innehållsspecialist kan vilja ha utkastinstruktioner, en SEO-specialist kan vilja ha valideringsregler och en teamledare kan vilja ha styrning. En väletiketterad personväxlare minskar ansträngningen att översätta generiska råd till “vad betyder detta för mig?” Den håller också den gemensamma utgångspunkten på en plats, vilket undviker att tre nästan likadana sidor konkurrerar om samma avsikt.

Den psykologiska fördelen är igenkänning framför tolkning. En läsare kan känna igen en etikett som “SEO-team” snabbare än de kan skanna tre stycken för att sluta sig till vilken som gäller. Flikar bevarar också rumslig kontext: panelen ändras på samma plats, så läsaren kan jämföra parallella vägar utan att upprepade gånger scrolla förbi den gemensamma introduktionen.

Den bekvämligheten skapar en avvägning för maskinextraherbarhet. Maskinextraherbarhet är förmågan hos en crawler, sökindex, hjälpmedelsteknik eller hämtningssystem att isolera innehåll samtidigt som dess ämne och relationer bevaras. Synliga rubriker och stycken framträder i en uppenbar läsordning. Flikpaneler introducerar ett interaktionstillstånd: en är synlig, flera är det inte, och programvara måste koppla varje fliketikett till rätt panel. En svag implementering lämnar bara den aktiva panelen i HTML-koden, laddar andra paneler efter ett klick, eller upprepar generiska rubriker som “Fördelar” utan personanamnet. I varje fall får en maskin mindre sammanhang än läsaren ser.

Även en korrekt implementering kan minska extraherbarheten jämfört med vanliga avsnitt. Vissa system prioriterar initialt synlig text, plattar till interaktiva relationer eller utelämnar dolt innehåll från utdrag. Flikar är därför ett informationsdirigeringsverktyg, inte ett sätt att dölja väsentliga svar. Placera det gemensamma svaret, definitionen, varningen, behörighetsvillkoret och slutsatsen utanför flikuppsättningen. Använd paneler för målgruppsspecifik tillämpning, exempel, arbetsflöden eller bevis som förblir användbara efter att det gemensamma svaret är känt.

Tillämpa skrivreglerna för element : skriv den fullständiga förklaringen först, klassificera sedan en verklig uppsättning parallella läsarvägar som detta typade element. Reglerna på denna sida har företräde för panelmappning, interaktion och innehållsbegränsningar.

När ska det användas

Använd en flik-/personväxlare när alla dessa villkor är uppfyllda:

1. Två till fem igenkännbara målgrupper, sammanhang eller lägen behöver olika tillämpningar av samma ämne.
2. Varje panel svarar på samma fråga med jämförbart djup.
3. De flesta läsare behöver en panel i taget, medan en minoritet kan jämföra två eller fler.
4. Det gemensamma svaret kan anges utanför elementet utan att tvinga en läsare att öppna varje flik.
5. Att hålla vägarna på en sida är tydligare än att underhålla separata sidor med till stor del dubbletter av introduktioner.

Starka användningsområden inkluderar implementeringsvägledning för “Utvecklare / Redaktörer / Granskare”, introduktionsvägar för “Enskild / Team / Byrå” och en kapacitet förklarad genom “Planera / Producera / Mät.” Personaetiketter bör återspegla meningsfulla skillnader i arbetsflöde, bevis, behörigheter eller önskat resultat – inte demografiska gissningar.

Nära-träffar kommer ofta från att försöka förkorta en sida. Lägg inte sekventiella steg i flikar; att dölja steg två tills en läsare väljer det förstör procedurens ordning. Flika inte en kort lista med definitioner, eftersom vanliga rubriker exponerar samma information med mindre interaktion. Använd inte flikar för en detaljerad funktionsjämförelse: en jämförelsetabell håller kriterierna samtidigt synliga. Använd inte flikar som navigering mellan orelaterade ämnen, och dela inte upp information enbart för att sidan känns lång.

En accordion passar bättre när avsnitten är oberoende frågor i ett vertikalt läsfiöde eller när flera svar bör vara öppna. Separata sidor är bättre när varje målgrupp behöver en distinkt sökavsikt, rubrik, bevisuppsättning, konverteringsväg eller mer än cirka 300 ord unikt innehåll. Om en läsare behöver alla paneler för att agera säkert eller korrekt är flikar fel komponent.

Var ska det placeras

Placera växlaren efter det gemensamma svaret och stycket som förklarar varför vägarna skiljer sig. Läsaren bör förstå det gemensamma ämnet innan de väljer en etikett. På en produkt- eller lösningssida innebär det vanligtvis efter det centrala värdeerbjudandet och den gemensamma kapacitetsförklaringen, men före detaljerade bevis och den primära avslutande åtgärden. I dokumentation, placera den omedelbart före de rollspecifika instruktionerna den styr.

Placera inte en flikuppsättning före sidans direkta svar, definition eller obligatoriska varning. Placera den inte mellan ett påstående och dess källa, mellan en förkunskap och proceduren den styr, eller mellan ett pris och dess kvalifikationer. Dessa relationer måste överleva även när ingen panel är vald. En flikuppsättning får inte placeras bredvid en annan flikuppsättning, en accordion, ett stort jämförelserutnät eller en karusell; intilliggande interaktionsmodeller skapar konkurrerande kontroller och otydlig läsordning.

Undvik nästlade flikar. Det yttre valet döljer det inre valet, skapar svårt tangentbordsbeteende och gör djupa länkar tvetydiga. Undvik också att placera en personväxlare omedelbart ovanför en annan målgruppsväljare i ett formulär eller en CTA. Om båda kontrollerna använder liknande etiketter kanske läsare inte vet om de ändrar synligt innehåll eller skickar en preferens.

Anatomi

Anatomin har en etiketterad behållare, en ordnad fliklista och en panel för varje flik. Skärmdumpen måste visa inaktiva paneler i DOM-inspektören såväl som det synliga tillståndet eftersom närvaro i källkoden är en del av elementet, inte en implementeringsdetalj.

1. Gemensam rubrik: Anger den gemensamma frågan eller uppgiften som varje panel behandlar.
2. Fliklista: Grupperar två till fem parallella etiketter i en stabil författad ordning.
3. Fliketikett: Namnger en målgrupp, ett sammanhang eller ett läge i språk som läsare känner igen.
4. Valt tillstånd: Förmedlar den aktiva fliken genom textsemantik och en synlig behandling, inte enbart färg.
5. Panel: Innehåller en självständig rubrik och innehållet för en etikett.
6. Programmatisk relation: aria-controls på fliken och aria-labelledby på panelen kopplar ihop varje par.
7. Fallback-ordning: Håller den gemensamma rubriken, etiketterna och allt panelinnehåll meningsfullt när skript eller formatering inte körs.

Avstånd, kantlinje, indikatorform, animation och brytpunkt tillhör renderaren. Författare kontrollerar etiketter, källordning, panelinnehåll och en valfri stabil fragment-identifierare.

Designexempel

Komponenten stöder fyra varianter. Varje variant använder samma innehållsmodell och DOM-krav.

Personflikar: Använd rolletiketter när arbetsflöden, bevis eller nästa åtgärder verkligen skiljer sig åt beroende på läsare. Föredra etablerad kundspråk som “Interna team” framför påhittade personor som “Tillväxtgurus.”

Kontextflikar: Använd icke-persona-tillstånd som teamstorlek, operativ modell eller implementeringsläge. Den gemensamma rubriken måste namnge den föränderliga dimensionen så att etiketterna inte misstas för sidnavigering.

Vertikala flikar: Använd endast när etiketter behöver mer horisontellt utrymme och det inte finns fler än fem. DOM- och tangentbordsordning förblir flik ett till och med flik fem, följt av deras associerade paneler enligt den valda tillgängliga implementeringen.

Smalt visningsfönster och fallback-tillstånd: Etiketter kan scrollas horisontellt när en synlig ledtråd gör överflödet uppenbart, eller så kan renderaren visa paneler som staplade etiketterade avsnitt. Den får inte trunkera etiketter till tvetydiga fragment eller ta bort inaktivt innehåll från HTML-koden.

Parametrar

Innehållskontraktet håller relationen explicit samtidigt som visuellt och responsivt beteende lämnas till renderaren.

Etiketter är attribut eftersom de styr kontrollen; panelrubriker kommer från den första rubriken eftersom de tillhör innehållet. De två kan vara lika, men en koncis fliketikett kan mappas till en mer utförlig, extraherbar panelrubrik. Panelbrödtexter tillåter stycken, en kort lista, inline-kod, en bild och en kontextuell åtgärd. De tillåter inte ytterligare en flikuppsättning, accordion, datatabell, formulär, videospelare eller flerstegsprocedur.

Syntax och kodexempel

Alla tre notationerna bevarar en rubrik, ordnade etiketter, panelrubriker, panelbrödtexter, stabila ID:n och den initiala standarden. Det bärbara Markdown-direktivet är den kanoniska författade formen.

Bärbart Markdown-direktiv

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Välj ditt team

::item{label="Innehållsteam" id=content-teams}
### Förvandla briefen till ett återanvändbart utkast

Börja med det efterfrågade svaret, bevisen och elementuppsättningen. Utforma resonemanget i sin helhet innan du tillämpar komponenter.
::

::item{label="SEO-team" id=seo-teams}
### Verifiera upptäckbarhet och extrahering

Inspektera den renderade HTML-koden, interna länkar, rubriker och strukturerade fält. Bekräfta att varje panel kommer i det initiala svaret.
::

::item{label="Teamledare" id=team-leaders}
### Granska systemet, inte bara sidan

Godkänn det gemensamma löftet en gång, granska sedan var varje målgrupp verkligen behöver ett annat arbetsflöde, bevispunkt eller nästa åtgärd.
:::
:::

Den överordnade brödtextens första rubrik mappas till title. Varje nästlat objekt tar label och id från attribut, mappar sin första rubrik till item.title och resten till item.content.

Hugo-shortcode

{{< tabs-persona-switcher title="Välj ditt team" default="content-teams" variant="horizontal" >}}
  {{< tab-item label="Innehållsteam" id="content-teams" title="Förvandla briefen till ett återanvändbart utkast" >}}
  Börja med det efterfrågade svaret, bevisen och elementuppsättningen. Utforma resonemanget i sin helhet innan du tillämpar komponenter.
  {{< /tab-item >}}
  {{< tab-item label="SEO-team" id="seo-teams" title="Verifiera upptäckbarhet och extrahering" >}}
  Inspektera den renderade HTML-koden, interna länkar, rubriker och strukturerade fält. Bekräfta att varje panel kommer i det initiala svaret.
  {{< /tab-item >}}
  {{< tab-item label="Teamledare" id="team-leaders" title="Granska systemet, inte bara sidan" >}}
  Godkänn det gemensamma löftet en gång, granska sedan var varje målgrupp verkligen behöver ett annat arbetsflöde, bevispunkt eller nästa åtgärd.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

Adaptern använder endast namngivna parametrar. Den måste rendera alla objektbrödtexter under serversvaret, avvisa dubbla ID:n och initiera interaktion utan att skriva om innehållsmodellen.

WordPress-block

<!-- wp:amicited/tabs-persona-switcher {"title":"Välj ditt team","default":"content-teams","variant":"horizontal"} -->
  <!-- wp:amicited/tab-item {"label":"Innehållsteam","id":"content-teams","title":"Förvandla briefen till ett återanvändbart utkast"} -->
  <p>Börja med det efterfrågade svaret, bevisen och elementuppsättningen. Utforma resonemanget i sin helhet innan du tillämpar komponenter.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"SEO-team","id":"seo-teams","title":"Verifiera upptäckbarhet och extrahering"} -->
  <p>Inspektera den renderade HTML-koden, interna länkar, rubriker och strukturerade fält. Bekräfta att varje panel kommer i det initiala svaret.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Teamledare","id":"team-leaders","title":"Granska systemet, inte bara sidan"} -->
  <p>Godkänn det gemensamma löftet en gång, granska sedan var varje målgrupp verkligen behöver ett annat arbetsflöde, bevispunkt eller nästa åtgärd.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPress bör begränsa inre block till registrerade flikobjekt. Förhandsgranskning, sparad markup och front-end-rendering måste behålla varje panel; redaktörens bekvämlighet får inte göra inaktiva objekt till klient-hämtat innehåll.

Exempel

Bra exempel

Välj en implementeringsväg

Hostad plattform — Kom igång utan att underhålla infrastruktur

Anslut den godkända datakällan, konfigurera roller och validera utdata i en staging-miljö. Leverantören underhåller runtime-uppdateringar och övervakning; ditt team ansvarar för innehållsgodkännande och åtkomstgranskning.

Egen server — Kontrollera driftsättning och datagränser

Distribuera det stödda paketet i din miljö, anslut samma godkända datakälla och utse en ansvarig för uppgraderingar, övervakning, säkerhetskopiering och åtkomstgranskning.

Detta fungerar eftersom båda panelerna svarar på samma implementeringsfråga, namnger den operativa skillnaden och innehåller jämförbara ansvarsområden. “Hostad plattform” och “Egen server” är igenkännbara etiketter. Det gemensamma beslutet förblir tydligt om båda panelerna plattas till i källordning.

Dåligt exempel

Utforska allt

Översikt: Vår plattform gör moderna team mer effektiva.

Pris: Kontakta sälj för en personlig offert och viktiga kontraktsvillkor.

Säkerhet: Läs vår säkerhetsdokumentation.

Karriär: Gå med i vårt växande team.

Detta är webbplatsnavigering förklädd som flikar. Panelerna svarar inte på en gemensam fråga, etiketterna blandar köparinformation med företagsinnehåll och viktiga prisvillkor är dolda bakom en interaktion. Ersätt uppsättningen med vanliga sidavsnitt och riktig navigering. Om prismöjligheter behöver samtidig utvärdering, använd en pris- eller jämförelsestruktur istället för flikar.

Schema-markup och tillgänglighet

Flikar och personväxlare skapar inte en dedikerad Schema.org-typ. Deras innehåll förblir en del av den omslutande Article, TechArticle, Product eller WebPage när den sidan oberoende kvalificerar sig. Markera inte flikar som ItemList enbart för att de upprepas, och generera inte flera Person-entiteter från personaetiketter. En etikett som “Byrå” beskriver en läsarväg, inte en faktisk enhetspåstående.

Använd WAI-ARIA-flikmönstret endast när gränssnittet faktiskt beter sig som flikar. Behållaren har role="tablist"; varje kontroll har role="tab", ett unikt ID, aria-controls och ett korrekt aria-selected-värde; varje panel har role="tabpanel" och aria-labelledby. Använd knappar för kontroller, inte länkar med falska destinationer. Den valda fliken tillhör sidans flikordning; inaktiva flikar använder roving tabindex="-1" och förblir nåbara med piltangenter. Home och End flyttar till första respektive sista fliken. Aktivering kan följa fokus endast när panelväxling är omedelbar; annars aktiverar Enter eller Mellanslag den fokuserade fliken.

Fokus måste vara förutsägbart. Att välja en flik flyttar inte automatiskt fokus till dess panel. En panel kan använda tabindex="0" när dess första innehåll inte annars är fokuserbart, vilket låter tangentbordsanvändare navigera in i den. En synlig fokusindikator och vald indikator måste skilja sig åt, och ingen av dem får förlita sig enbart på färg.

Alla paneler måste renderas i det första HTML-svaret. Att dölja inaktiva paneler med hidden, CSS eller en progressivt förbättrad motsvarighet är acceptabelt; att skapa dem först efter ett klick är det inte. Utan JavaScript måste fallbacken visa varje etiketterad panel i källordning eller tillhandahålla riktiga länkar till server-renderade destinationer. Stabila fragment kan aktivera en panel, men den kanoniska sidan förblir en URL. Testa zoom, smala skärmar, långa översatta etiketter, skärmläsarrelationer, tangentbordsordning och skriptfel.

Skrivregler

Börja med den gemensamma frågan. Om varje föreslagen panel svarar på en annan fråga, använd inte flikar. Skriv två till fem objekt, med tre eller fyra som rekommendation. Håll etiketter till en till fyra ord och 28 tecken där det är möjligt. Använd parallell grammatik: alla roller (“Redaktörer / Granskare”), alla lägen (“Hostad / Egen server”) eller alla stadier (“Planera / Producera / Mät”). Blanda inte en roll, ett verb och en marknadsfras.

Ge varje panel en rubrik på 3–10 ord som namnger både den relevanta vägen och dess utfall när fliketiketten ensam inte räcker. Skriv 40–180 ord per panel, med 300 som absolut maximum. Paneler bör ha jämförbart djup, men de behöver inte ha identiskt ordantal. Använd direkt språk och konkreta skillnader i uppgifter, bevis, behörigheter, begränsningar eller åtgärder. Att endast ändra pronomen från “du” till “ditt team” motiverar inte en annan panel.

Håll gemensam information utanför elementet. Att upprepa samma inledande mening i varje panel skapar underhållsglidning och får extraherade passager att se dubblerade ut. Placera skillnader inuti paneler och gör varje skillnad tillräckligt explicit för att överleva extrahering. Föredra “Byråteam kan tilldela roller på kundnivå” framför “Du får mer kontroll,” vilket förlorar sitt subjekt när det separeras från den valda etiketten.

Placera aldrig följande inuti en flikuppsättning:

• Sidans enda definition, direkta svar, slutsats, säkerhetsvarning, juridiska kvalifikation, behörighetsregel eller källtillskrivning.
• Sekventiella steg som varje läsare måste slutföra, eller förkunskaper som styr innehåll utanför en panel.
• En annan flikuppsättning, accordion, karusell, komplex datatabell, flerfältsformulär eller automatiskt spelande media.
• Mer än en primär uppmaning till handling per panel, eller åtgärder som leder till orelaterade trattsteg.
• Innehåll som laddas först efter interaktion, även när laddningstillståndet är snabbt för en mänsklig användare.
• Etiketter som “Övrigt”, “Mer”, “Allmänt” eller “Resurser” som döljer en odefinierad relation.

Om varje panel överstiger 300 ord, behöver sin egen bevisuppsättning eller riktar sig mot en annan sökavsikt, publicera dedikerade avsnitt eller sidor. Om läsare behöver jämföra flera kriterier samtidigt, använd en tabell. Om innehållet endast är valfri detalj, använd prosa eller en accordion beroende på relationen.

Inläggstyper som använder det

Fältet postTypes i frontmatter är källan till denna tabell. Inkludering innebär att formatet kan stödja flikar; det gör dem inte obligatoriska.

QA-checklista

• En gemensam fråga: Varje panel svarar på samma avgränsade fråga för en annan målgrupp, kontext eller läge.
• Lämpligt antal: Uppsättningen innehåller två till fem flikar, helst tre eller fyra, med koncisa parallella etiketter.
• Synligt gemensamt svar: Definitionen, kärnsvaret, obligatorisk kvalifikation och slutsats förblir utanför flikuppsättningen.
• Närvaro i initial DOM: Varje panel och dess fullständiga författade innehåll finns i det första server-renderade HTML.
• Explicit kontext: Varje panelrubrik och inledande mening förblir begripliga när de extraheras utan det visuella fliktillståndet.
• Korrekta relationer: Flik- och panel-ID:n är unika; aria-controls och aria-labelledby kopplar dem korrekt.
• Tangentbordsbeteende: Pil, Home, End, Enter, Mellanslag, Tab och Shift+Tab beter sig enligt den valda aktiveringsmodellen.
• Fokustydlighet: Fokus och markering är visuellt distinkta, och markering flyttar inte fokus oväntat.
• Stabil fallback: Skriptfel exponerar etiketterat innehåll eller användbara server-renderade destinationer utan att förlora information.
• Responsivt beteende: Etiketter förblir fullständiga och upptäckbara vid smala bredder, 200 % zoom och med längre översatt text.
• Säker placering: Komponenten separerar inte ett påstående från bevis, en varning från dess omfattning eller förkunskaper från instruktioner.
• Ingen komplex nästling: Paneler innehåller avgränsad prosa och enkelt stödjande innehåll, inte ett annat interaktionssystem.
• Återhållsamhet med schema: Renderaren hittar inte på lista, person eller målgruppsschema från presentationsetiketter.
• Notationsparitet: Markdown, Hugo och WordPress bevarar samma ordning, ID:n, standard, etiketter, rubriker och panelbrödtexter.

En granskare bör avvisa komponenten när inaktivt innehåll kräver en klickutlöst nätverksbegäran, när väsentlig information endast finns inuti en panel, eller när etiketterna inte beskriver parallella vägar. Det är innehålls- och arkitekturmisslyckanden; visuell förfining kan inte reparera dem.

FAQ

De strukturerade FAQ-posterna i frontmatter behandlar indexering, fragment-URL:er, flikantal, uppmaningar till handling och skillnaden mellan flikar och accordions. De är avsiktligt placerade utanför det interaktiva elementet så att varje läsare och renderare får samma implementeringsvägledning.