Corso di HTML / Creare contenuti espandibili con details e summary

details e summary creano contenuti che gli utenti possono espandere e comprimere senza scrivere JavaScript. Sono adatti per spiegazioni opzionali, istruzioni più lunghe o risposte che i lettori vogliono vedere a seconda delle necessità.

Creare un semplice pannello espandibile

<details>
  <summary>Orari di apertura</summary>
  <p>Siamo aperti da lunedì a venerdì dalle 9:00 alle 18:00.</p>
</details>

Inserite il codice nel body di un documento HTML e apritelo in un browser. All'inizio appare solo "Orari di apertura". Attivate questo testo con il mouse, il touch o la tastiera per visualizzare il paragrafo; attivatelo di nuovo per chiuderlo. Inserite summary come primo figlio di details. Il browser fornisce lo stato di apertura di base e l'interazione; non serve uno script per aprirlo e chiuderlo.

Il marcatore e i bordi possono apparire diversi a seconda del browser o dello stile CSS. L'importante è che l'etichetta rimanga chiara, il contenuto possa essere aperto e chiuso e il focus della tastiera sia visibile.

Mostrare inizialmente il contenuto

Aggiungete l'attributo open se il pannello deve essere visualizzato aperto all'inizio. Gli utenti possono comunque chiuderlo e riaprirlo. La regola della presenza booleana è dimostrata anche con checked nella sintassi HTML.

<details open>
  <summary>Informazioni sulla consegna</summary>
  <p>I tempi di consegna variano a seconda della zona.</p>
</details>

open è un attributo booleano. Scrivere open="false" fa sì che l'attributo sia sempre presente e apre il pannello all'inizio. Rimuovete completamente l'attributo per iniziare chiuso. Non nascondete una condizione che tutti devono poter leggere, come se fosse solo informazione aggiuntiva opzionale.

Scegliere etichette utili

Più elementi details possono apparire insieme, ma ogni summary deve identificare quale contenuto mostra. Ripetere "Maggiori informazioni" rende gli elementi difficili da distinguere. Una domanda frequente può seguire questo schema, ma se la sua risposta è breve e immediatamente utile, il testo normalmente visibile può essere più veloce per i lettori.

Verificate il risultato con una tastiera e su uno schermo stretto. La documentazione di details su MDN descrive la sua struttura e i suoi attributi.

Verificare l'uso della tastiera e lo stato iniziale

1. Aprite di nuovo il file e confrontate l'esempio chiuso senza open con l'esempio aperto con open.
2. Premete il tasto Tab per raggiungere l'elemento summary e verificate la visualizzazione del suo focus. Mantenete il contenuto di summary per questo esempio di base come semplice testo, invece di posizionare link o pulsanti concorrenti al suo interno.
3. Usate i tasti Invio e Spazio separatamente per aprirli e chiuderli. Se aggiungete CSS, ripetete il test per assicurarvi che il focus rimanga visibile.

HTML offre il meccanismo di espansione nativo, ma l'aggiunta di ulteriori interazioni può introdurre un comportamento di focus che deve ancora essere testato. La documentazione di summary su MDN descrive le condizioni di utilizzo.

Se ciò non funziona

Verificate che summary si trovi all'interno di details e che i tag di chiusura siano presenti. Se avete stilizzato il controllo, assicuratevi che l'area cliccabile e l'indicatore di focus visibile non siano stati rimossi. Un pannello espandibile obbliga l'utente a un'azione aggiuntiva, quindi è meglio riservarlo a contenuti davvero opzionali o lunghi, invece di usarlo solo per un effetto visivo. Ampliate il controllo del focus e dell'interazione con la piccola pagina in Fondamenti di accessibilità: Intestazioni, Link, Immagini e Tastiera.