Introduzione
Gli elementi interattivi nativi di HTML, come <details>, <summary> e <dialog>, permettono di costruire interfacce utili senza dipendere subito da librerie esterne. In questo tutorial vediamo un caso pratico molto comune: un pannello di consenso cookie che mostra un riepilogo iniziale, consente di aprire i dettagli delle preferenze e, se necessario, visualizza una finestra di dialogo per confermare la scelta.
Questo approccio è interessante perché unisce tre vantaggi:
- Accessibilità: i controlli sono semantici e più facili da usare con tastiera e screen reader.
- Progressive enhancement: la struttura base funziona anche senza JavaScript avanzato.
- Manutenibilità: il codice resta compatto e leggibile.
Il sotto-argomento scelto è quindi pratico e diverso da una semplice FAQ o da una generica finestra modale: qui costruiamo un flusso reale di consenso, con un pannello espandibile e una conferma finale in dialog.
Codice completo
<section aria-labelledby="cookie-title">
<h2 id="cookie-title">Preferenze cookie</h2>
<p>
Usiamo cookie tecnici e, solo con il tuo consenso, cookie di analisi.
Puoi modificare le preferenze in qualsiasi momento.
</p>
<details id="cookie-details">
<summary>Mostra dettagli e preferenze</summary>
<div>
<p><strong>Cookie tecnici</strong>: sempre attivi per il funzionamento del sito.</p>
<p><strong>Cookie di analisi</strong>: ci aiutano a capire come viene usato il sito.</p>
<ul>
<li>
<label>
<input type="checkbox" id="analytics-cookie" checked>
Consenti cookie di analisi
</label>
</li>
<li>
<label>
<input type="checkbox" id="marketing-cookie">
Consenti cookie di marketing
</label>
</li>
</ul>
<p>
<button type="button" id="open-confirmation">
Salva preferenze
</button>
</p>
</div>
</details>
<dialog id="cookie-dialog" aria-labelledby="dialog-title">
<h3 id="dialog-title">Conferma preferenze</h3>
<p id="dialog-message">
Stai per salvare le tue preferenze cookie. Vuoi confermare la scelta?
</p>
<form method="dialog">
<button value="cancel">Annulla</button>
<button value="confirm">Conferma</button>
</form>
</dialog>
<p id="cookie-status" aria-live="polite"></p>
</section>
<script>
const details = document.getElementById(´cookie-details´);
const openButton = document.getElementById(´open-confirmation´);
const dialog = document.getElementById(´cookie-dialog´);
const status = document.getElementById(´cookie-status´);
const analytics = document.getElementById(´analytics-cookie´);
const marketing = document.getElementById(´marketing-cookie´);
openButton.addEventListener(´click´, () => {
if (typeof dialog.showModal === ´function´) {
dialog.showModal();
} else {
status.textContent = ´Il browser non supporta dialog: salva le preferenze con un’alternativa personalizzata.´;
}
});
dialog.addEventListener(´close´, () => {
if (dialog.returnValue === ´confirm´) {
const prefs = [];
prefs.push(analytics.checked ? ´analisi: attivi´ : ´analisi: disattivi´);
prefs.push(marketing.checked ? ´marketing: attivi´ : ´marketing: disattivi´);
status.textContent = ´Preferenze salvate. ´ + prefs.join(´, ´) + ´.´;
details.open = false;
} else {
status.textContent = ´Salvataggio annullato.´;
}
});
</script>Spiegazione
Vediamo come funziona il progetto, elemento per elemento.
<details> come contenitore espandibile
<details> crea una sezione richiudibile nativa. È perfetta per nascondere contenuti secondari, come informazioni tecniche o opzioni avanzate. In questo esempio contiene le preferenze cookie: l’utente può aprire il pannello solo quando vuole approfondire.
Il vantaggio principale è che il comportamento base è già gestito dal browser. Non devi scrivere codice per aprire o chiudere il pannello, a meno che tu non voglia sincronizzarlo con altre azioni.
<summary> come punto di accesso
<summary> è il titolo cliccabile del blocco details. Deve essere chiaro, breve e descrivere bene il contenuto nascosto. Nel nostro caso il testo “Mostra dettagli e preferenze” spiega subito cosa succede quando l’utente interagisce.
Dal punto di vista dell’usabilità, summary è importante perché:
- è raggiungibile da tastiera;
- annuncia lo stato aperto o chiuso;
- riduce la necessità di componenti personalizzati.
<dialog> per la conferma finale
<dialog> è utile quando serve un’interazione più importante, come una conferma prima di salvare dati sensibili o cambiare impostazioni. Nel nostro esempio, il dialog chiede all’utente di confermare le preferenze cookie.
Il metodo showModal() apre la finestra come modale, cioè bloccando l’interazione con il resto della pagina finché non viene chiusa. Questo è molto utile per flussi che richiedono attenzione.
Il ruolo di form method="dialog"
All’interno di dialog abbiamo usato un piccolo form con method="dialog". Questa soluzione è elegante perché i pulsanti chiudono il dialog in modo nativo e impostano un valore in returnValue. In questo modo possiamo capire se l’utente ha confermato o annullato.
aria-live per i messaggi dinamici
Il paragrafo con aria-live="polite" serve ad annunciare il risultato dell’azione agli screen reader. Quando l’utente salva o annulla, il messaggio viene aggiornato e comunicato in modo non invasivo.
Flusso dell’interazione
- L’utente apre details per vedere le opzioni.
- Seleziona i cookie desiderati.
- Clicca su Salva preferenze.
- Si apre dialog per la conferma finale.
- Alla chiusura, il codice aggiorna lo stato e richiude il pannello se la scelta è confermata.
Best practice
- Usa summary descrittivi: evita testi vaghi come “Apri qui”. Meglio indicare chiaramente il contenuto.
- Non abusare del dialog: usalo solo quando serve davvero una decisione esplicita dell’utente.
- Garantisci un fallback: non tutti i browser o contesti supportano sempre allo stesso modo
showModal(). - Controlla il focus: il dialog modale gestisce bene il focus, ma verifica sempre il comportamento con tastiera.
- Usa messaggi chiari: il testo di conferma deve spiegare cosa sta succedendo senza ambiguità.
- Evita interazioni nascoste: se un’azione salva dati, l’utente deve capirlo subito.
- Sincronizza stato visivo e logico: se confermi le preferenze, chiudi anche il pannello details per mostrare che l’azione è completata.
Un consiglio pratico: se il tuo progetto prevede molte impostazioni, puoi usare details per raggruppare le opzioni avanzate e dialog solo per le azioni irreversibili o importanti. Questo mantiene l’interfaccia ordinata e meno invadente.
Riepilogo
In questo tutorial abbiamo costruito un pannello di consenso cookie accessibile usando tre elementi HTML interattivi:
- <details> per nascondere e mostrare le preferenze;
- <summary> come attivatore semantico del pannello;
- <dialog> per confermare la scelta in modo chiaro e controllato.
Questa soluzione è utile perché combina semplicità, accessibilità e un comportamento vicino a quello di componenti più complessi, ma con meno codice. È un ottimo esempio di come HTML moderno possa già coprire casi d’uso reali in modo elegante.
Approfondisci con risorse ufficiali
- MDN Web Docs - <details>: documentazione completa sull’elemento espandibile.
- MDN Web Docs - <summary>: dettagli su comportamento, accessibilità e supporto browser.
- MDN Web Docs - <dialog>: guida all’uso delle finestre di dialogo native.
- WHATWG HTML Standard: specifica ufficiale del comportamento degli elementi HTML.
- WAI-ARIA Authoring Practices: utile per verificare pattern e accessibilità delle interazioni.
Se vuoi, nel prossimo passo posso trasformare questo esempio in una versione più completa con salvataggio in localStorage e gestione del consenso persistente.