Accordion: regole ed esempi di divulgazione progressiva

Un accordion è un insieme raggruppato di controlli di apertura etichettati che consente al lettore di rivelare o comprimere contenuti di supporto nella stessa posizione. Usalo per dettagli di riferimento opzionali, non per la risposta principale della pagina.

Questa coppia renderizzata dimostra la divulgazione progressiva: le etichette rimangono scannerizzabili, un pannello è aperto ed entrambe le risposte sono presenti nell’HTML della pagina, che il visitatore interagisca o meno.

Perché questo elemento è importante

La divulgazione progressiva significa mostrare le informazioni necessarie per la decisione corrente, mantenendo al contempo i dettagli più approfonditi o meno comuni disponibili su richiesta. Aiuta quando una pagina serve lettori con diversi livelli di conoscenza. Un cliente abituale può scorrere oltre le note di implementazione; un nuovo utente può aprirle. Il controllo riduce la densità visiva senza eliminare contenuti o costringere ogni lettore a passare attraverso ogni eccezione.

La stessa comodità può diventare occultamento. Un lettore che cerca una risposta diretta, arriva sulla pagina e vede otto etichette chiuse deve indovinare quale pannello la contiene ed eseguire un’azione aggiuntiva. Su mobile, l’apertura e chiusura ripetuta sposta anche il contenuto nel viewport. L’accordion quindi si guadagna il suo posto solo quando la maggior parte dei lettori può completare il proprio compito principale senza aprire ogni pannello.

L’estraibilità automatica aggiunge un test più rigoroso. L’estraibilità è la capacità dei motori di ricerca, dei sistemi di risposta AI, dei parser e degli strumenti assistivi di ricevere il testo e preservare la sua relazione con l’etichetta. Ogni risposta deve essere presente nel DOM (Document Object Model) iniziale renderizzato lato server, la rappresentazione strutturata della pagina nel browser. I CSS possono comprimere visivamente un pannello presente; JavaScript non deve recuperare o creare la risposta solo dopo un clic. Un crawler potrebbe non fare mai clic, eseguire il codice client o attendere una richiesta secondaria.

Segui le regole di scrittura degli elementi prima di usare questo modello. Se lo scopo del contenuto corrisponde a un elemento tipizzato più specifico, quell’elemento ha la precedenza. Un accordion può contenere contenuti di supporto consentiti, ma non deve rinominare o appiattire un avviso, un confronto, una definizione o una sequenza di passaggi solo per rendere la pagina più corta.

Quando usarlo

Usa un accordion quando tutte e quattro le condizioni sono vere:

1. Il lettore può prevedere il contenuto del pannello dalla sua etichetta.
2. Il contenuto è utile a un sottoinsieme di lettori piuttosto che necessario a tutti.
3. Tutto il contenuto del pannello è presente nell’HTML iniziale e rimane raggiungibile senza un dispositivo di puntamento.
4. La compressione migliora materialmente la scannerizzazione sul viewport previsto.

Buoni candidati includono dettagli di compatibilità opzionali, rami di errore poco comuni, definizioni di supporto, clausole policy secondarie, eccezioni di spedizione e risposte di riferimento raggruppate. Un accordion può funzionare anche per una grande raccolta FAQ quando ogni domanda rimane visibile e ogni risposta è autonoma.

I casi quasi corretti rivelano gli usi impropri più comuni:

• Una pagina breve con due brevi sezioni: titoli e paragrafi visibili sono più veloci da scansionare rispetto a due controlli.
• Un articolo lungo fatto apparire più corto: comprimere dieci sezioni sostanziali riduce l’altezza percepita ma aumenta l’interazione e nasconde la portata della pagina.
• Informazioni primarie sul prodotto: prezzo, disponibilità, limitazioni dei materiali, termini di cancellazione e specifiche principali influenzano la decisione e non devono dipendere dall’espansione.
• Una procedura sequenziale: i passaggi richiedono ordine e contesto. Un pannello chiuso può far saltare un prerequisito ai lettori o eseguire passaggi fuori sequenza.
• Un confronto: i lettori hanno bisogno di visibilità simultanea attraverso gli stessi criteri. Pannelli separati costringono a un confronto basato sulla memoria.
• Un avviso di sicurezza o una qualifica legale: la conseguenza di perderlo è maggiore del beneficio visivo di nasconderlo.
• Un sostituto della navigazione: un accordion non è un indice. Rivela contenuti nella stessa posizione anziché spostarsi verso sezioni di pagina stabili.

Quando sei in dubbio, pubblica il contenuto in modo visibile. Scorrere in più è solitamente recuperabile; una risposta mancata, un vincolo non dichiarato o un nodo DOM non disponibile non lo è.

Dove posizionarlo

Posiziona l’accordion dopo che la pagina ha fornito la sua risposta diretta e una spiegazione visibile sufficiente affinché il lettore capisca cosa contiene il gruppo. Intoducilo con un H2 e una frase di ambito. Il gruppo si comporta quindi come un livello di riferimento supplementare all’interno di quella sezione.

Regole precise di posizionamento:

• Mettilo dopo la spiegazione visibile a cui si riferisce, mai tra un’affermazione e le prove a sostegno di quell’affermazione.
• Mantienilo all’interno della sezione padre il cui soggetto etichetta ogni elemento. Se le etichette hanno senso solo con un’intestazione mancante, il gruppo è fuori posto.
• Posiziona un accordion di dettagli prodotto dopo il valore principale, il contesto del prezzo e le condizioni di acquisto; posiziona i rami di risoluzione problemi dopo la diagnosi condivisa e il primo controllo più sicuro.
• Tieni un accordion FAQ di chiusura dopo la conclusione principale e prima dell’azione successiva finale, a patto che risponda a domande residuali anziché ripetute.
• Dai al gruppo un’ancora di sezione stabile quando i lettori potrebbero collegarsi ad esso. I collegamenti ai singoli pannelli sono opzionali, ma se forniti devono aprire e focalizzare l’elemento corretto.

Un accordion non può essere posizionato direttamente accanto a schede, un secondo accordion o una tabella di confronto densa. Modelli di interazione adiacenti costringono i lettori a scegliere un meccanismo prima di poter scegliere il contenuto. Non può interrompere passaggi ordinati, separare un avviso dalla sua conseguenza, o essere posizionato tra un prezzo prodotto e le condizioni che regolano quel prezzo. Non posizionare un banner promozionale all’interno del gruppo o immediatamente dopo ogni pannello; la promozione compete con l’attività di riferimento e fa sembrare l’espansione una trappola di vendita.

Anatomia

L’anatomia etichettata contiene sette parti:

1. Intestazione del gruppo: nomina il soggetto condiviso nella gerarchia documentale circostante.
2. Etichetta dell’elemento: prevede il contenuto specifico senza etichette vaghe come “Scopri di più”.
3. Controllo di apertura: un summary nativo o un button che riceve il focus da tastiera e attiva/disattiva un pannello.
4. Indicatore di stato: comunica visivamente se è aperto o chiuso, mentre lo stato programmatico è esposto attraverso semantica nativa o aria-expanded.
5. Pannello: contiene la risposta o il dettaglio di riferimento e rimane nel DOM iniziale.
6. Relazione di controllo: la semantica nativa <details>/<summary> o aria-controls più ID corrispondenti associano ogni controllo a esattamente un pannello.
7. Confine dell’elemento: spaziatura, bordo e raggruppamento DOM impediscono a un’etichetta di sembrare che controlli una risposta vicina.

Il chevron visibile è decorativo. Nascondilo alla tecnologia assistiva perché lo stato espanso fornisce già il significato. La sola rotazione non può comunicare lo stato; la semantica del controllo deve farlo.

Esempi di design

Ogni variante utilizza gli stessi campi e la regola di presenza nel DOM. Scegli la variante leggendo il compito, non la decorazione.

Gruppo standard a apertura singola

L’apertura di un elemento chiude l’elemento precedentemente aperto. Usalo quando i pannelli sono alternative e i lettori normalmente ne hanno bisogno uno alla volta, come sintomi di risoluzione problemi mutuamente esclusivi.

Gruppo di riferimento ad apertura multipla

I lettori possono tenere aperti diversi pannelli. Usalo quando potrebbero confrontare o combinare dettagli supplementari, come tipi di file supportati e autorizzazioni dell’account. Se il confronto simultaneo è il compito principale, usa invece una tabella visibile.

Orientamento con apertura predefinita

Apri il primo elemento o quello più comune al caricamento iniziale quando dimostra il modello di contenuto e fornisce un utile orientamento. Non aprire mai più di un elemento solo per riempire spazio.

Variante FAQ compatta

Usa etichette di domande e risposte concise e autonome. L’interazione non giustifica di per sé i dati strutturati; lo schema dipende dal tipo di contenuto e dai record visibili esatti.

Stato di stress con contenuto lungo

Un pannello con più di due brevi paragrafi segnala che il materiale potrebbe meritare una sezione visibile. La variante di stress esiste per testare il wrapping, i collegamenti, gli elenchi, il focus e il flusso responsive, non come obiettivo editoriale normale.

Parametri

Il contratto separa il comportamento del gruppo dal contenuto dell’elemento in modo che ogni piattaforma possa preservare le stesse etichette, stati e relazioni.

La prima intestazione padre corrisponde a heading. La prima intestazione di ogni elemento annidato corrisponde a label, e tutto ciò che la segue corrisponde al content di quell’elemento. Questo è un mapping esplicito di elementi annidati, coerente con la precedenza di base e le regole del corpo. open=true imposta solo la presentazione iniziale; non modifica l’importanza del contenuto. Quando linkable=true, navigare verso un frammento di elemento deve espanderlo, spostare il focus in modo prevedibile e lasciare l’intestazione visibile sotto qualsiasi intestazione appiccicosa.

Sintassi ed esempi di codice

Tutte e tre le notazioni rappresentano un gruppo canonico. Possono renderizzare classi wrapper diverse, ma devono preservare il contenuto nell’HTML iniziale, l’ordine di origine, i nomi accessibili e lo stato.

Direttiva Markdown portabile

:::accordion{mode=multiple linkable=true}
## Export details

::item{id="included-fields" open=true}
### Which fields are included?

The export contains the fields currently available to your account and report scope.
::

::item{id="filter-behavior"}
### Do filters affect the export?

Yes. Confirm the active date range, market, and status filters before creating the file.
::
:::

Shortcode Hugo

{{< accordion heading="Export details" mode="multiple" linkable="true" >}}
{{< accordion-item id="included-fields" label="Which fields are included?" open="true" >}}
The export contains the fields currently available to your account and report scope.
{{< /accordion-item >}}
{{< accordion-item id="filter-behavior" label="Do filters affect the export?" >}}
Yes. Confirm the active date range, market, and status filters before creating the file.
{{< /accordion-item >}}
{{< /accordion >}}

Questa è la specifica dell’adattatore Hugo. Un repository non la soddisfa aggiungendo classi a intestazioni arbitrarie; serve un render che produca HTML di apertura nativo o una relazione equivalente di pulsante e pannello.

Blocco WordPress

<!-- wp:amicited/accordion {"heading":"Export details","mode":"multiple","linkable":true} -->
<!-- wp:amicited/accordion-item {"id":"included-fields","label":"Which fields are included?","open":true} -->
<p>The export contains the fields currently available to your account and report scope.</p>
<!-- /wp:amicited/accordion-item -->
<!-- wp:amicited/accordion-item {"id":"filter-behavior","label":"Do filters affect the export?"} -->
<p>Yes. Confirm the active date range, market, and status filters before creating the file.</p>
<!-- /wp:amicited/accordion-item -->
<!-- /wp:amicited/accordion -->

Il blocco WordPress registrato memorizza i campi canonici anziché affidarsi a un gruppo visivo di blocchi Details non correlati. Il suo render lato server deve emettere ogni risposta prima dell’interazione.

Esempi

Buon esempio

Dettagli eliminazione account appare dopo una spiegazione visibile di cosa fa l’eliminazione e un avviso visibile che è irreversibile. Le sue tre etichette sono “Cosa succede alle esportazioni pianificate?”, “Per quanto tempo rimane disponibile un archivio richiesto?” e “Un altro amministratore può annullare la richiesta?” Ogni pannello contiene un ramo opzionale, tutte le risposte sono in HTML e il focus da tastiera è visibile.

Funziona perché la conseguenza principale e l’azione richiesta rimangono visibili. L’accordion contiene domande secondarie che si applicano a lettori diversi, e ogni etichetta permette al lettore di prevedere se vale la pena aprirla.

Cattivo esempio

Scegli il tuo piano contiene pannelli chiusi etichettati “Starter”, “Team” ed “Enterprise”. Prezzo, limiti di utilizzo, durata del contratto, condizioni di cancellazione e disponibilità sono all’interno dei pannelli. Solo un piano può essere aperto alla volta.

Fallisce perché i criteri di acquisto necessitano di visibilità affiancata. Il lettore deve aprire ripetutamente i pannelli e ricordare i dati, mentre un estrattore non interattivo potrebbe non rilevare i prezzi caricati via client. Sostituiscilo con una tabella di prezzi o specifiche visibile e riserva l’apertura per dettagli opzionali come formati di fattura o regole di idoneità poco comuni.

Markup schema e accessibilità

L’accordion non ha un tipo Schema.org dedicato. L’interazione non alimenta dati strutturati semplicemente esistendo. Se i suoi record sono genuine domande e risposte, il contratto di contenuto FAQ può alimentare FAQPage; se il gruppo contiene dettagli di prodotto, policy o note di risoluzione problemi, usa solo lo schema giustificato dalla pagina e dal contenuto. Il testo visibile e qualsiasi rappresentazione strutturata devono corrispondere.

Preferisci <details> e <summary> nativi per le aperture semplici perché il browser fornisce operatività da tastiera e semantica di stato. Dove il design o il comportamento a apertura singola richiedono un’implementazione personalizzata, ogni controllo deve essere un button, esporre aria-expanded="true" o "false", riferirsi al suo pannello con aria-controls e avere un ID univoco a cui il pannello possa riferirsi con aria-labelledby. Non posizionare il controllo su un div con un gestore di clic.

Invio o Spazio devono attivare il controllo focalizzato. Tab si sposta attraverso i controlli e il contenuto interattivo nel pannello aperto; il focus non deve entrare nel contenuto chiuso. Aprire o chiudere un pannello normalmente lascia il focus sul suo controllo. La navigazione con i tasti freccia tra le intestazioni è opzionale, ma se implementata non deve sostituire il normale comportamento di Tab.

Mantieni tutte le etichette nell’albero di accessibilità e tutte le risposte nell’HTML sorgente. Un pannello visivamente chiuso può utilizzare il comportamento di apertura nativo o uno stato nascosto supportato, ma i suoi contenuti devono diventare disponibili quando espansi senza un secondo recupero. Lo stato compresso non deve causare contenuti duplicati attraverso copie desktop e mobili separate. Testa allo zoom del 200%, con etichette lunghe, solo tastiera, movimento ridotto e un lettore di schermo. Anima l’altezza o la rotazione dell’icona solo quando il movimento può essere soppresso e il contenuto non viene ritardato.

Regole di scrittura

L’etichetta si fa carico del costo dell’interazione, quindi deve fare una promessa precisa. Scrivi 3–14 parole e di solito non più di 120 caratteri. Usa una domanda diretta per i contenuti FAQ e una frase nominale descrittiva per i contenuti di riferimento. Evita “Altro”, “Dettagli”, “Leggi questo” ed etichette che differiscono solo per un numero.

Usa 3–8 elementi per gruppo. Ogni pannello dovrebbe normalmente contenere 20–120 parole e non più di 250. Due pannelli brevi sono più chiari come prosa aperta; nove o più necessitano di raggruppamento, navigazione visibile o consolidamento editoriale. Mantieni le etichette grammaticalmente parallele e disponi gli elementi per compito del lettore, frequenza prevista o una sequenza reale di categorie, non in ordine alfabetico a meno che la ricerca non sia genuinamente alfabetica.

Il tono del pannello è diretto, autonomo e fattuale. Esponi la risposta nella prima frase perché il lettore ha già pagato un costo di interazione. Definisci qualsiasi termine necessario all’interno del pannello o nel testo visibile immediatamente prima del gruppo. Non iniziare con preamboli come “Ci sono diverse cose da considerare.”

Non inserire mai solo all’interno di un accordion:

• la risposta diretta della pagina o la proposta di valore unica;
• avvisi di sicurezza, controindicazioni, obblighi legali o conseguenze irreversibili;
• prezzo, disponibilità, limiti materiali del prodotto o condizioni di acquisto obbligatorie;
• passaggi ordinati, prerequisiti o una verifica di completamento;
• prove necessarie a supportare l’affermazione circostante;
• un confronto primario o una matrice decisionale;
• moduli, controlli di pagamento, consenso o il principale invito all’azione della pagina;
• un altro accordion, schede o un carosello.

Un elenco compatto, una piccola tabella, un collegamento inline o un’immagine di supporto sono accettabili quando appartengono interamente a un elemento opzionale e rimangono utilizzabili su mobile. Se un pannello ha bisogno del proprio indice o di più di un livello di intestazione, promuovilo a sezione visibile o pagina separata.

Tipi di post che lo utilizzano

L’array postTypes nel frontmatter è la fonte di questa matrice di utilizzo. L’inclusione significa che l’elemento è disponibile nella condizione indicata, non obbligatorio su ogni pagina di quel tipo.

Checklist QA

• Una risposta diretta visibile appare prima dell’accordion.
• Ogni elemento è contenuto di riferimento opzionale, non informazioni necessarie a tutti i lettori.
• Il gruppo ha 3–8 elementi con etichette precise e parallele.
• Il testo completo di ogni pannello è presente nell’HTML iniziale renderizzato lato server.
• Nessuna risposta dipende da una richiesta di rete attivata da clic o da un’inserzione solo lato client.
• details/summary nativi o pulsanti reali forniscono il corretto comportamento da tastiera.
• I controlli personalizzati espongono aria-expanded, aria-controls, ID univoci e un’etichetta del pannello associata.
• Il focus è visibile, rimane prevedibile dopo l’attivazione e non può entrare in un pannello chiuso.
• Le etichette lunghe vanno a capo senza tagli, sovrapposizioni o nascondere l’indicatore di stato.
• Il layout funziona allo zoom del 200% e su un viewport stretto senza scorrimento orizzontale.
• Il movimento rispetta le preferenze di movimento ridotto e non ritarda mai l’accesso al contenuto.
• I collegamenti a frammenti individuali, quando supportati, aprono e rivelano il pannello corretto.
• I dati strutturati si basano sul significato del contenuto, non sull’aspetto dell’accordion.
• I record FAQPage, se emessi, corrispondono esattamente al testo visibile di domanda e risposta.
• Nessun accordion annidato, insieme di schede adiacente, copia mobile ripetuta o CTA principale è presente.
• La pagina comunica comunque la sua risposta principale quando ogni pannello è chiuso.

Domande frequenti

Il frontmatter memorizza i record FAQ canonici per questa pagina. Le loro risposte rafforzano il confine di implementazione: il contenuto può essere visivamente compresso, ma rimane presente, accessibile e secondario rispetto alla risposta visibile.