Introduzione
Gli elementi <details>, <summary> e <dialog> fanno parte degli strumenti HTML più utili per costruire interfacce interattive senza dipendere subito da librerie esterne. In questo tutorial vedremo un sotto-argomento molto pratico: come usare questi elementi per gestire un pannello laterale con contenuti espandibili, una finestra informativa e un dialogo di conferma accessibile.
Il caso d’uso è reale: in molte applicazioni web serve mostrare un’area con opzioni avanzate, una nota informativa o una conferma prima di applicare un’azione. Con HTML moderno possiamo ottenere tutto questo con una struttura semantica chiara, un comportamento accessibile e poco JavaScript.
L’obiettivo non è solo “far funzionare” l’interfaccia, ma farla bene: comprensibile per gli utenti, navigabile da tastiera e facile da mantenere nel tempo.
Codice completo
<details id="pannello-filtri">
<summary>Mostra filtri avanzati</summary>
<section aria-labelledby="titolo-filtri">
<h3 id="titolo-filtri">Filtri avanzati</h3>
<p>Usa questi controlli per restringere i risultati.</p>
<ul>
<li><label><input type="checkbox"> Disponibili subito</label></li>
<li><label><input type="checkbox"> Solo con sconto</label></li>
<li><label><input type="checkbox"> Spedizione gratuita</label></li>
</ul>
<p>
<button id="apri-dialog">Vedi nota importante</button>
</p>
</section>
</details>
<dialog id="dialog-nota">
<form method="dialog">
<h3>Nota importante</h3>
<p>
I filtri vengono applicati solo ai prodotti disponibili nel catalogo attuale.
Se cambi pagina, alcune preferenze potrebbero non essere salvate.
</p>
<ul>
<li>Premi Esc per chiudere la finestra</li>
<li>Usa il pulsante per confermare e tornare ai filtri</li>
</ul>
<p>
<button value="close">Ho capito</button>
</p>
</form>
</dialog>
<script>
const details = document.getElementById(´pannello-filtri´);
const dialog = document.getElementById(´dialog-nota´);
const openButton = document.getElementById(´apri-dialog´);
openButton.addEventListener(´click´, () => {
dialog.showModal();
});
dialog.addEventListener(´close´, () => {
details.open = true;
});
</script>Spiegazione
Partiamo da <details>. Questo elemento crea un contenitore espandibile nativo: l’utente può aprirlo o chiuderlo cliccando su <summary>. È ideale per aree secondarie dell’interfaccia, come filtri, impostazioni, note tecniche o sezioni di supporto.
1. Perché usare details e summary
Nel nostro esempio, il pannello “Mostra filtri avanzati” resta chiuso di default. Quando l’utente lo apre, compare un blocco con opzioni di filtro. Questo approccio è utile perché:
- riduce il disordine visivo;
- mantiene il contenuto semanticamente corretto;
- funziona anche senza JavaScript;
- è navigabile da tastiera in modo naturale.
2. Il ruolo di dialog
L’elemento <dialog> è perfetto per mostrare una finestra modale nativa. In questo caso lo usiamo per una nota informativa collegata ai filtri. La chiamata dialog.showModal() apre la finestra e blocca l’interazione con il resto della pagina finché l’utente non la chiude.
Un vantaggio importante è che il dialog nativo gestisce già diversi aspetti dell’accessibilità, come il focus e la chiusura con il tasto Esc. Questo non significa che possiamo ignorare la progettazione accessibile, ma partiamo da una base molto solida.
3. Form con method="dialog"
All’interno del dialog abbiamo inserito un <form method="dialog">. Questo è un trucco molto utile: quando l’utente preme un pulsante nel form, il dialog si chiude automaticamente senza bisogno di scrivere codice aggiuntivo per la chiusura.
Nel nostro esempio il pulsante “Ho capito” chiude la finestra. È una soluzione pulita, semplice e coerente con il comportamento previsto di una finestra modale informativa.
4. Relazione tra details e dialog
Il codice JavaScript collega i due elementi: quando l’utente apre la nota importante, il dialog compare. Alla chiusura del dialog, il pannello dei filtri viene riaperto con details.open = true. Questo è utile se vogliamo mantenere il contesto visibile e riportare l’utente al punto in cui si trovava.
In molti casi reali questa logica migliora l’esperienza: l’utente legge l’avviso, chiude la finestra e ritrova subito il pannello su cui stava lavorando.
5. Accessibilità e semantica
Abbiamo usato <section> con aria-labelledby per associare il contenuto al titolo interno. Questo aiuta i lettori di schermo a interpretare meglio la struttura della pagina. Anche la scelta di usare una lista per i filtri è importante: comunica chiaramente che si tratta di opzioni distinte.
Inoltre, il pulsante che apre il dialog è un vero <button>, non un elemento generico con eventi clic. Questo è fondamentale per garantire comportamento corretto con tastiera e tecnologie assistive.
Best practice
- Usa details per contenuti secondari: filtri, spiegazioni, impostazioni e blocchi opzionali sono casi perfetti.
- Usa summary come etichetta chiara: il testo deve spiegare bene cosa si aprirà, evitando formule vaghe come “clicca qui”.
- Non abusare del dialog: le finestre modali interrompono il flusso. Usale solo quando è davvero necessario attirare l’attenzione dell’utente.
- Preferisci form method="dialog" per i casi semplici: riduce codice e migliora la manutenzione.
- Gestisci il focus con attenzione: se il dialog contiene molti elementi interattivi, verifica che il percorso di navigazione sia chiaro e lineare.
- Evita contenuti essenziali dentro details chiusi: se una informazione è critica, non nasconderla dietro un pannello espandibile.
- Testa con tastiera e screen reader: è il modo migliore per scoprire problemi di usabilità reale.
- Non sovraccaricare il JavaScript: spesso basta pochissimo codice per collegare questi elementi in modo efficace.
Riepilogo
In questo tutorial abbiamo visto come combinare details, summary e dialog per costruire un’interfaccia pratica: un pannello di filtri espandibile, una nota informativa modale e un comportamento coordinato tra i due elementi.
I punti chiave da ricordare sono:
- <details> è perfetto per contenuti opzionali e comprimibili;
- <summary> definisce il controllo di apertura;
- <dialog> serve per messaggi o azioni che devono catturare temporaneamente l’attenzione;
- con poco JavaScript puoi collegare i componenti e migliorare l’esperienza utente;
- la semantica corretta rende l’interfaccia più robusta e accessibile.
Se vuoi progettare componenti HTML moderni, questi elementi sono un ottimo punto di partenza: ti permettono di creare interazioni pulite, leggibili e già vicine alle aspettative degli utenti.
Approfondisci con risorse ufficiali
- MDN Web Docs - details: documentazione completa sull’elemento espandibile.
- MDN Web Docs - summary: guida all’uso corretto del sommario cliccabile.
- MDN Web Docs - dialog: riferimento per finestre modali native e metodi come showModal().
- WHATWG HTML Living Standard: specifica ufficiale del comportamento degli elementi HTML.
- WAI-ARIA Authoring Practices: utile per verificare pattern e comportamento accessibile delle interfacce.