Introduzione
Gli elementi nativi details, summary e dialog permettono di costruire interfacce interattive usando HTML semantico e una quantità limitata di JavaScript. In questo tutorial realizzeremo una piccola scheda prodotto: l’utente potrà espandere le specifiche tecniche, leggere le informazioni sulla spedizione e aprire una finestra di anteprima con un riepilogo del prodotto.
Questo esempio è diverso da un semplice pannello FAQ o da una finestra di conferma. L’obiettivo è simulare un caso concreto di e-commerce in cui le informazioni vengono mostrate progressivamente, senza sovraccaricare la pagina. details gestisce i contenuti secondari, summary rappresenta il controllo attivabile e dialog mostra un’anteprima temporanea in primo piano.
Il vantaggio principale consiste nell’utilizzare elementi HTML progettati per l’interazione. Il browser gestisce già l’apertura e la chiusura di details, mentre il metodo showModal() trasforma un elemento dialog in una finestra modale con comportamento appropriato.
Codice completo
<article class="product-card">
<h2>Zaino Urban Explorer</h2>
<p>
Uno zaino compatto per il lavoro, lo studio e gli spostamenti quotidiani.
</p>
<p>
<strong>Prezzo:</strong> 89,90 €
</p>
<button type="button" id="open-preview">
Mostra anteprima
</button>
<details>
<summary>Specifiche tecniche</summary>
<ul>
<li>Capacità: 22 litri</li>
<li>Materiale: poliestere riciclato</li>
<li>Peso: 780 grammi</li>
<li>Scomparto imbottito per computer portatili</li>
</ul>
</details>
<details>
<summary>Spedizione e resi</summary>
<p>
La consegna standard richiede dai 2 ai 4 giorni lavorativi.
Puoi restituire il prodotto entro 30 giorni dalla ricezione.
</p>
</details>
</article>
<dialog id="product-dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Anteprima prodotto</h2>
<p>
Stai visualizzando <strong>Zaino Urban Explorer</strong>.
</p>
<p>
Colore selezionato: verde bosco
</p>
<form method="dialog">
<button type="submit">Chiudi anteprima</button>
</form>
</dialog>
<script>
const previewButton = document.querySelector("#open-preview");
const productDialog = document.querySelector("#product-dialog");
previewButton.addEventListener("click", () => {
productDialog.showModal();
});
productDialog.addEventListener("click", (event) => {
// Chiude il dialog se l´utente seleziona lo sfondo esterno.
if (event.target === productDialog) {
productDialog.close();
}
});
</script>Spiegazione
Il ruolo di details e summary
L’elemento details contiene una sezione che può essere aperta o chiusa. Il primo elemento figlio dovrebbe essere normalmente summary, perché rappresenta l’etichetta visibile che l’utente può selezionare.
Nel codice, le specifiche tecniche sono inizialmente nascoste. Quando l’utente attiva summary, il browser aggiunge automaticamente l’attributo booleano open a details. Non è quindi necessario scrivere JavaScript per gestire questa interazione di base.
Se una sezione deve essere già aperta al caricamento, è sufficiente usare l’attributo open:
<details open>
<summary>Informazioni già visibili</summary>
<p>Questo contenuto viene mostrato immediatamente.</p>
</details>Il funzionamento di dialog
dialog rappresenta una finestra o una superficie interattiva separata dal contenuto principale. Nel nostro esempio è utilizzato per mostrare una breve anteprima del prodotto senza cambiare pagina.
Il metodo showModal() apre il dialog in modalità modale. In questa modalità l’interazione dell’utente viene concentrata sulla finestra. Per chiuderla utilizziamo un pulsante inserito in un form method="dialog": il comportamento di chiusura è fornito nativamente dal browser.
È anche possibile chiudere la finestra tramite JavaScript:
productDialog.close();L’attributo aria-labelledby collega il dialog all’intestazione identificata da dialog-title. In questo modo il titolo della finestra può essere annunciato correttamente dalle tecnologie assistive.
Chiusura facendo clic sullo sfondo
Il click sullo sfondo esterno non chiude automaticamente tutti i dialog in modo uniforme. Per offrire questo comportamento, il codice verifica se l’elemento cliccato coincide con il dialog stesso. Se il click avviene su un contenuto interno, invece, la finestra rimane aperta.
Best practice
- Usa un testo significativo per
summary: “Specifiche tecniche” è più utile di un’etichetta generica come “Apri”. - Mantieni il contenuto essenziale: inserisci nei pannelli espandibili informazioni secondarie, non elementi indispensabili per completare un’azione.
- Preferisci i controlli nativi: un
buttonè più accessibile di un elemento generico con un evento click. - Prevedi sempre una chiusura evidente: il dialog deve contenere un pulsante con un’azione esplicita, come “Chiudi anteprima”.
- Non abusare delle finestre modali: usale per informazioni brevi o azioni concentrate, non per contenuti lunghi che potrebbero stare nella pagina.
- Verifica la navigazione da tastiera: prova ad aprire i pannelli con il tasto Tab e ad attivare i controlli con Invio o Barra spaziatrice.
- Collega il titolo al dialog:
aria-labelledbymigliora la comprensione della finestra con gli screen reader. - Non inserire CSS o JavaScript non necessari: prima di aggiungere una soluzione personalizzata, sfrutta il comportamento nativo degli elementi HTML.
Riepilogo
details è adatto per contenuti espandibili come specifiche, condizioni o informazioni logistiche. summary fornisce il controllo visibile con cui l’utente apre e chiude la sezione. dialog, invece, consente di presentare un’anteprima o un contenuto temporaneo in una finestra separata.
Combinando questi elementi è possibile creare una scheda prodotto più ordinata, leggibile e accessibile. Il JavaScript rimane limitato alla gestione dell’apertura del dialog e all’eventuale chiusura facendo clic sullo sfondo, mentre la maggior parte dell’interazione è affidata agli elementi HTML nativi.