Schede / Cambio di Persona: Formato, Regole ed Esempi

Uno switcher a schede/cambio di persona offre a diversi lettori percorsi distinti attraverso un argomento circoscritto, senza inviarli a pagine separate. Le etichette identificano il percorso; selezionandone una si rivela il suo pannello nella stessa posizione. L’elemento è utile solo quando i pannelli sono realmente equivalenti e ogni pannello rimane presente nell’HTML iniziale della pagina.

Lo stato renderizzato mostra un pannello attivo, ma gli altri due pannelli sono anch’essi presenti nel document object model (DOM), la rappresentazione strutturata della pagina del browser. Sono nascosti con l’attributo nativo hidden, non richiesti dopo un clic. Un renderizzatore di produzione aggiunge il comportamento da tastiera e puntatore descritto più avanti; il contratto di contenuto redatto rimane lo stesso su tutte le piattaforme.

Perché questo elemento è importante

I lettori filtrano una pagina in base al loro ruolo, obiettivo e livello di responsabilità. Uno specialista di contenuti potrebbe volere istruzioni di redazione, uno specialista SEO potrebbe volere regole di validazione e un responsabile di team potrebbe volere linee guida di governance. Uno switcher di persona ben etichettato riduce lo sforzo di tradurre consigli generici in “cosa significa per me?” Inoltre mantiene la premessa condivisa in un unico punto, evitando che tre pagine quasi identiche competano per la stessa intenzione di ricerca.

Il vantaggio psicologico è il riconoscimento rispetto all’interpretazione. Un lettore può riconoscere un’etichetta come “Team SEO” più velocemente di quanto possa scansionare tre paragrafi per dedurre quale si applica. Le schede preservano anche il contesto spaziale: il pannello cambia nella stessa posizione, quindi il lettore può confrontare percorsi equivalenti senza scorrere ripetutamente oltre l’introduzione condivisa.

Questa comodità crea un compromesso sull’estraibilità da parte delle macchine. L’estraibilità da parte delle macchine è la capacità di un crawler, indice di ricerca, tecnologia assistiva o sistema di recupero di isolare il contenuto preservandone il soggetto e le relazioni. Intestazioni e paragrafi visibili appaiono in una sequenza di lettura ovvia. I pannelli a schede introducono uno stato di interazione: uno è visibile, molti non lo sono, e il software deve collegare ogni etichetta della scheda al pannello corretto. Un’implementazione debole lascia solo il pannello attivo nell’HTML, carica altri pannelli dopo un clic o ripete intestazioni generiche come “Vantaggi” senza il nome della persona. In ogni caso, una macchina riceve meno contesto di quanto veda il lettore.

Anche un’implementazione corretta può ridurre l’estraibilità rispetto alle sezioni ordinarie. Alcuni sistemi danno priorità al testo inizialmente visibile, appiattiscono le relazioni interattive o omettono il contenuto nascosto dagli estratti. Le schede sono quindi uno strumento di instradamento delle informazioni, non un modo per nascondere risposte essenziali. Inserisci la risposta condivisa, definizione, avvertenza, condizione di ammissibilità e conclusione all’esterno del set di schede. Usa i pannelli per applicazioni specifiche del pubblico, esempi, flussi di lavoro o prove che rimangono utili dopo che la risposta comune è nota.

Applica le regole di scrittura degli elementi : redigi prima la spiegazione completa, poi classifica un insieme genuino di percorsi di lettura equivalenti come questo elemento tipizzato. Le regole di questa pagina prevalgono per la mappatura dei pannelli, l’interazione e i limiti di contenuto.

Quando usarlo

Usa uno switcher a schede/cambio di persona quando sono vere tutte queste condizioni:

1. Da due a cinque pubblici, contesti o modalità riconoscibili necessitano di applicazioni diverse dello stesso argomento.
2. Ogni pannello risponde alla stessa domanda con profondità comparabile.
3. La maggior parte dei lettori ha bisogno di un pannello alla volta, mentre una minoranza può confrontarne due o più.
4. La risposta comune può essere espressa all’esterno dell’elemento senza obbligare il lettore ad aprire ogni scheda.
5. Mantenere i percorsi su una sola pagina è più chiaro che mantenere pagine separate con introduzioni in gran parte duplicate.

Gli usi appropriati includono indicazioni di implementazione per “Sviluppatori / Redattori / Revisori”, percorsi di onboarding per “Singolo / Team / Agenzia” e una capacità spiegata attraverso “Pianifica / Produci / Misura”. Le etichette delle persone dovrebbero riflettere differenze significative nel flusso di lavoro, nelle evidenze, nelle autorizzazioni o nel risultato desiderato, non supposizioni demografiche.

I casi quasi corretti spesso derivano dal tentativo di accorciare una pagina. Non inserire passaggi sequenziali nelle schede; nascondere il passaggio due finché il lettore non lo seleziona distrugge l’ordine della procedura. Non trasformare in schede un breve elenco di definizioni, perché le normali intestazioni espongono le stesse informazioni con meno interazione. Non usare le schede per un confronto dettagliato di funzionalità: una tabella comparativa mantiene i criteri simultaneamente visibili. Non usare le schede come navigazione tra argomenti non correlati e non suddividere le informazioni solo perché la pagina sembra lunga.

Un accordion è più adatto quando le sezioni sono domande indipendenti in un flusso di lettura verticale o quando più risposte dovrebbero rimanere aperte. Pagine separate sono migliori quando ogni pubblico necessita di una distinta intenzione di ricerca, titolo, set di evidenze, percorso di conversione o più di circa 300 parole di contenuto unico. Se un lettore ha bisogno di tutti i pannelli per agire in sicurezza o correttamente, le schede sono il componente sbagliato.

Dove posizionarlo

Posiziona lo switcher dopo la risposta condivisa e il paragrafo che spiega perché i percorsi differiscono. Il lettore dovrebbe comprendere l’argomento comune prima di scegliere un’etichetta. In una pagina di prodotto o soluzione, di solito significa dopo la proposta di valore principale e la spiegazione della capacità condivisa, ma prima delle prove dettagliate e dell’azione di chiusura primaria. Nella documentazione, posizionalo immediatamente prima delle istruzioni specifiche per ruolo che controlla.

Non posizionare un set di schede prima della risposta diretta, definizione o avvertenza obbligatoria della pagina. Non metterlo tra un’affermazione e la sua fonte, tra un prerequisito e la procedura che governa, o tra un prezzo e le sue qualifiche. Queste relazioni devono sopravvivere anche quando nessun pannello è selezionato. Un set di schede non può essere affiancato a un altro set di schede, un accordion, una grande griglia di confronto o un carosello; modelli di interazione adiacenti creano controlli concorrenti e un ordine di lettura poco chiaro.

Evita schede annidate. La scelta esterna nasconde la scelta interna, crea un comportamento da tastiera difficile e rende ambigui i collegamenti profondi. Evita anche di posizionare uno switcher di persona immediatamente sopra un altro selettore di pubblico in un modulo o CTA. Se entrambi i controlli usano etichette simili, i lettori potrebbero non sapere se stanno cambiando il contenuto visibile o inviando una preferenza.

Anatomia

L’anatomia comprende un contenitore etichettato, un elenco ordinato di schede e un pannello per ogni scheda. Lo screenshot deve mostrare i pannelli inattivi nell’ispettore del DOM oltre allo stato visibile, perché la presenza nel sorgente fa parte dell’elemento, non un dettaglio implementativo.

1. Titolo condiviso: Indica la domanda o attività comune che ogni pannello affronta.
2. Elenco schede: Raggruppa da due a cinque etichette equivalenti in un ordine di creazione stabile.
3. Etichetta scheda: Denomina un pubblico, contesto o modalità in un linguaggio riconoscibile dai lettori.
4. Stato selezionato: Comunica la scheda attiva attraverso la semantica del testo e un trattamento visivo, non solo il colore.
5. Pannello: Contiene un’intestazione autonoma e il contenuto per un’etichetta.
6. Relazione programmatica: aria-controls sulla scheda e aria-labelledby sul pannello collegano ogni coppia.
7. Ordine di fallback: Mantiene il titolo condiviso, le etichette e tutto il contenuto dei pannelli significativi quando script o stili non vengono eseguiti.

Spaziatura, bordo, forma dell’indicatore, animazione e punto di interruzione appartengono al renderizzatore. Gli autori controllano etichette, ordine nel sorgente, contenuto dei pannelli e un identificatore di frammento stabile opzionale.

Esempi di design

Il componente supporta quattro varianti. Ogni variante utilizza lo stesso modello di contenuto e lo stesso requisito DOM.

Schede persona: Usa etichette di ruolo quando flussi di lavoro, evidenze o azioni successive differiscono realmente a seconda del lettore. Preferisci il linguaggio clienti consolidato come “Team interni” rispetto a persone inventate come “Guru della crescita.”

Schede contesto: Usa stati non legati a persona come dimensione del team, modello operativo o modalità di implementazione. Il titolo condiviso deve nominare la dimensione variabile in modo che le etichette non vengano scambiate per navigazione della pagina.

Schede verticali: Usale solo quando le etichette necessitano di più spazio orizzontale e non ce ne sono più di cinque. L’ordine DOM e da tastiera rimane scheda uno fino a scheda cinque, seguite dai relativi pannelli secondo l’implementazione accessibile scelta.

Stato viewport stretto e fallback: Le etichette possono scorrere orizzontalmente quando un segnale visivo rende evidente l’overflow, oppure il renderizzatore può esporre i pannelli come sezioni etichettate impilate. Non deve troncare le etichette in frammenti ambigui né rimuovere il contenuto inattivo dall’HTML.

Parametri

Il contratto di contenuto mantiene esplicita la relazione lasciando il comportamento visivo e reattivo al renderizzatore.

Le etichette sono attributi perché azionano il controllo; i titoli dei pannelli provengono dalla prima intestazione perché appartengono al contenuto. I due possono essere simili, ma un’etichetta di scheda concisa può corrispondere a un’intestazione di pannello più completa ed estraibile. I corpi dei pannelli consentono paragrafi, un breve elenco, codice inline, un’immagine e un’azione contestuale. Non consentono un altro set di schede, accordion, tabella dati, modulo, lettore video o procedura a più passaggi.

Sintassi ed esempi di codice

Tutte e tre le notazioni preservano un titolo, etichette ordinate, intestazioni dei pannelli, corpi dei pannelli, ID stabili e il default iniziale. La direttiva Markdown portabile è la forma canonica di creazione.

Direttiva Markdown portabile

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Scegli il tuo team

::item{label="Content teams" id=content-teams}
### Trasforma il brief in una bozza ripetibile

Inizia con la risposta richiesta, le evidenze e il set di elementi. Abbozza il ragionamento per intero prima di applicare i componenti.
::

::item{label="SEO teams" id=seo-teams}
### Verifica scoperta ed estrazione

Ispeziona l'HTML renderizzato, i link interni, le intestazioni e i campi strutturati. Conferma che ogni pannello arrivi nella risposta iniziale.
::

::item{label="Team leaders" id=team-leaders}
### Esamina il sistema, non solo la pagina

Approva la promessa condivisa una volta sola, poi esamina dove ogni pubblico ha realmente bisogno di un flusso di lavoro, punto di prova o azione successiva diversi.
::
:::

La prima intestazione del corpo genitore corrisponde a title. Ogni elemento annidato prende label e id dagli attributi, associa la sua prima intestazione a item.title e il resto a item.content.

Shortcode Hugo

{{< 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" >}}
  Inizia con la risposta richiesta, le evidenze e il set di elementi. Abbozza il ragionamento per intero prima di applicare i componenti.
  {{< /tab-item >}}
  {{< tab-item label="SEO teams" id="seo-teams" title="Verify discovery and extraction" >}}
  Ispeziona l'HTML renderizzato, i link interni, le intestazioni e i campi strutturati. Conferma che ogni pannello arrivi nella risposta iniziale.
  {{< /tab-item >}}
  {{< tab-item label="Team leaders" id="team-leaders" title="Review the system, not just the page" >}}
  Approva la promessa condivisa una volta sola, poi esamina dove ogni pubblico ha realmente bisogno di un flusso di lavoro, punto di prova o azione successiva diversi.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

L’adattatore utilizza solo parametri nominati. Deve renderizzare tutti i corpi degli elementi durante la risposta del server, rifiutare ID duplicati e inizializzare l’interazione senza riscrivere il modello di contenuto.

Blocco WordPress

<!-- 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>Inizia con la risposta richiesta, le evidenze e il set di elementi. Abbozza il ragionamento per intero prima di applicare i componenti.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"SEO teams","id":"seo-teams","title":"Verify discovery and extraction"} -->
  <p>Ispeziona l'HTML renderizzato, i link interni, le intestazioni e i campi strutturati. Conferma che ogni pannello arrivi nella risposta iniziale.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Team leaders","id":"team-leaders","title":"Review the system, not just the page"} -->
  <p>Approva la promessa condivisa una volta sola, poi esamina dove ogni pubblico ha realmente bisogno di un flusso di lavoro, punto di prova o azione successiva diversi.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPress dovrebbe limitare i blocchi interni agli elementi scheda registrati. L’anteprima, il markup salvato e il rendering lato front-end devono conservare ogni pannello; la comodità per l’editor non deve trasformare gli elementi inattivi in contenuti recuperati lato client.

Esempi

Esempio corretto

Scegli un percorso di implementazione

Piattaforma ospitata — Avvia senza mantenere l’infrastruttura

Collega la fonte dati approvata, configura i ruoli e convalida l’output in un ambiente di staging. Il fornitore mantiene aggiornamenti runtime e monitoraggio; il tuo team possiede l’approvazione dei contenuti e la revisione degli accessi.

Self-hosted — Controlla distribuzione e confini dei dati

Distribuisci il pacchetto supportato nel tuo ambiente, collega la stessa fonte dati approvata e assegna un responsabile per aggiornamenti, monitoraggio, backup e revisione degli accessi.

Funziona perché entrambi i pannelli rispondono alla stessa domanda di implementazione, nominano la differenza operativa e contengono responsabilità comparabili. “Piattaforma ospitata” e “Self-hosted” sono etichette riconoscibili. La decisione condivisa rimane chiara se entrambi i pannelli vengono appiattiti nell’ordine del sorgente.

Esempio scorretto

Esplora tutto

Panoramica: La nostra piattaforma rende i team moderni più efficaci.

Prezzi: Contatta le vendite per un preventivo personalizzato e condizioni contrattuali importanti.

Sicurezza: Leggi la nostra documentazione sulla sicurezza.

Carriera: Unisciti al nostro team in crescita.

Questa è navigazione del sito travestita da schede. I pannelli non rispondono a una domanda condivisa, le etichette mescolano informazioni per l’acquirente con contenuti aziendali e condizioni di prezzo importanti sono nascoste dietro un’interazione. Sostituisci il set con sezioni di pagina ordinarie e vera navigazione. Se le opzioni di prezzo necessitano di una valutazione simultanea, usa una struttura di prezzi o confronto anziché schede.

Markup schema e accessibilità

Schede e cambi di persona non creano un tipo Schema.org dedicato. Il loro contenuto rimane parte dell’Article, TechArticle, Product o WebPage che lo contiene, quando quella pagina si qualifica indipendentemente. Non marcare le schede come ItemList solo perché sono ripetute e non generare più entità Person dalle etichette delle persone. Un’etichetta come “Agenzia” descrive un percorso di lettura, non un’affermazione fattuale su un’entità.

Usa il pattern WAI-ARIA delle schede solo quando l’interfaccia si comporta effettivamente come schede. Il contenitore ha role="tablist"; ogni controllo ha role="tab", un ID univoco, aria-controls e un valore aria-selected accurato; ogni pannello ha role="tabpanel" e aria-labelledby. Usa pulsanti per i controlli, non link con destinazioni fittizie. La scheda selezionata appartiene all’ordine di tabulazione della pagina; le schede inattive usano tabindex="-1" itinerante e rimangono raggiungibili con i tasti freccia. Home e Fine portano rispettivamente alla prima e all’ultima scheda. L’attivazione può seguire il focus solo quando il cambio di pannello è immediato; altrimenti Invio o Spazio attivano la scheda focalizzata.

Il focus deve rimanere prevedibile. Selezionare una scheda non sposta automaticamente il focus nel suo pannello. Un pannello può usare tabindex="0" quando il suo primo contenuto non è altrimenti focalizzabile, permettendo agli utenti da tastiera di spostarsi al suo interno. Un indicatore di focus visibile e un indicatore di selezione devono differire e nessuno dei due può basarsi solo sul colore.

Tutti i pannelli devono essere renderizzati nella risposta HTML iniziale. Nascondere i pannelli inattivi con hidden, CSS o un equivalente con progressive enhancement è accettabile; crearli solo dopo un clic non lo è. Senza JavaScript, il fallback deve esporre ogni pannello etichettato nell’ordine del sorgente o fornire link reali a destinazioni renderizzate lato server. Frammenti stabili possono attivare un pannello, ma la pagina canonica rimane un unico URL. Testa lo zoom, gli schermi stretti, le etichette tradotte lunghe, le relazioni con lo screen reader, l’ordine da tastiera e il fallimento degli script.

Regole di scrittura

Inizia con la domanda condivisa. Se ogni pannello proposto risponde a una domanda diversa, non usare le schede. Scrivi da due a cinque elementi, con tre o quattro preferiti. Mantieni le etichette da una a quattro parole e 28 caratteri dove possibile. Usa una grammatica parallela: tutti ruoli (“Redattori / Revisori”), tutte modalità (“Ospitato / Self-hosted”) o tutte fasi (“Pianifica / Produci / Misura”). Non mescolare un ruolo, un verbo e una frase di marketing.

Assegna a ogni pannello un’intestazione di 3–10 parole che nomini sia il percorso pertinente che il suo risultato quando la sola etichetta della scheda non è sufficiente. Scrivi 40–180 parole per pannello, con 300 come massimo assoluto. I pannelli dovrebbero avere profondità comparabile, ma non necessitano di conteggi di parole identici. Usa un linguaggio diretto e differenze concrete in attività, evidenze, autorizzazioni, vincoli o azioni. Cambiare solo i pronomi da “tu” a “il tuo team” non giustifica un altro pannello.

Mantieni le informazioni comuni all’esterno dell’elemento. Ripetere la stessa frase di apertura in ogni pannello crea deriva nella manutenzione e fa sembrare duplicati i passaggi estratti. Metti le differenze all’interno dei pannelli e rendi ogni differenza abbastanza esplicita da sopravvivere all’estrazione. Preferisci “I team agenzia possono assegnare ruoli a livello cliente” a “Hai più controllo,” che perde il suo soggetto quando separato dall’etichetta selezionata.

Non inserire mai questi elementi all’interno di un set di schede:

• L’unica definizione, risposta diretta, conclusione, avvertenza di sicurezza, condizione legale, regola di ammissibilità o attribuzione della fonte della pagina.
• Passaggi sequenziali che ogni lettore deve completare o prerequisiti che governano contenuti al di fuori di un pannello.
• Un altro set di schede, accordion, carosello, tabella dati complessa, modulo a più campi o media a riproduzione automatica.
• Più di un invito all’azione primario per pannello o azioni che portano a fasi del funnel non correlate.
• Contenuti caricati solo dopo l’interazione, anche quando lo stato di caricamento è veloce per un utente umano.
• Etichette come “Altro,” “Di più,” “Generale” o “Risorse” che nascondono una relazione indefinita.

Se ogni pannello supera le 300 parole, necessita di un proprio set di evidenze o ha come target un’intenzione di ricerca diversa, pubblica sezioni o pagine dedicate. Se i lettori devono confrontare più criteri contemporaneamente, usa una tabella. Se il contenuto è solo un dettaglio opzionale, usa prosa o un accordion in base alla relazione.

Tipi di post che lo utilizzano

Il campo postTypes del frontmatter è la fonte per questa tabella. L’inclusione significa che il formato può supportare le schede; non le rende obbligatorie.

Checklist QA

• Una domanda condivisa: Ogni pannello risponde alla stessa domanda circoscritta per un pubblico, contesto o modalità diverso.
• Conteggio appropriato: Il set contiene da due a cinque schede, preferibilmente tre o quattro, con etichette concise e parallele.
• Risposta comune visibile: La definizione, la risposta principale, la qualifica obbligatoria e la conclusione rimangono al di fuori del set di schede.
• Presenza nel DOM iniziale: Ogni pannello e il suo intero contenuto redatto appare nell’HTML iniziale renderizzato dal server.
• Contesto esplicito: Ogni intestazione del pannello e frase di apertura rimangono comprensibili quando estratte senza lo stato visivo della scheda.
• Relazioni corrette: Gli ID di schede e pannelli sono univoci; aria-controls e aria-labelledby li accoppiano correttamente.
• Comportamento da tastiera: Il comportamento di Freccia, Home, Fine, Invio, Spazio, Tab e Maiusc+Tab corrisponde al modello di attivazione scelto.
• Chiarezza del focus: Focus e selezione sono visivamente distinti e la selezione non sposta il focus inaspettatamente.
• Fallback stabile: Il fallimento dello script espone contenuto etichettato o destinazioni renderizzate dal server utilizzabili senza perdere informazioni.
• Comportamento reattivo: Le etichette rimangono complete e individuabili a larghezze ridotte, zoom al 200% e con testo tradotto più lungo.
• Posizionamento sicuro: Il componente non separa un’affermazione dalle prove, un’avvertenza dalla sua portata o i prerequisiti dalle istruzioni.
• Nessun annidamento complesso: I pannelli contengono prosa circoscritta e contenuti di supporto semplici, non un altro sistema di interazione.
• Moderazione dello schema: Il renderizzatore non inventa schema di elenco, persona o pubblico da etichette di presentazione.
• Parità di notazione: Markdown, Hugo e WordPress preservano lo stesso ordine, ID, default, etichette, intestazioni e corpi dei pannelli.

Un revisore dovrebbe rifiutare il componente quando il contenuto inattivo richiede una richiesta di rete attivata da clic, quando informazioni essenziali esistono solo all’interno di un pannello o quando le etichette non descrivono percorsi equivalenti. Si tratta di fallimenti di contenuto e architettura; il perfezionamento visivo non può ripararli.

FAQ

Le voci FAQ strutturate nel frontmatter riguardano l’indicizzazione, gli URL con frammento, il numero di schede, gli inviti all’azione e la distinzione tra schede e accordion. Sono intenzionalmente al di fuori dell’elemento interattivo in modo che ogni lettore e renderizzatore riceva le stesse indicazioni implementative.