Introduzione
Il tag <dialog> consente di creare finestre di dialogo native, come finestre modali, messaggi di conferma o pannelli informativi. È una soluzione semantica e accessibile, perché il browser può gestire automaticamente diversi comportamenti: apertura, chiusura con il tasto Esc, gestione del focus e isolamento temporaneo dei contenuti.
Il supporto moderno di <dialog> è buono nei browser aggiornati, ma un sito realmente robusto deve prevedere anche browser meno recenti o configurazioni particolari. Il principio del progressive enhancement consiste nel partire da una struttura HTML funzionante senza JavaScript e aggiungere funzionalità avanzate solo quando sono disponibili.
In questo esempio realizzeremo un messaggio di conferma per l´eliminazione di un elemento. Senza JavaScript l´utente potrà comunque raggiungere una pagina alternativa tramite un normale collegamento. Con JavaScript e il supporto a <dialog>, invece, verrà mostrata una finestra modale più comoda.
Codice completo
<main>
<h1>Gestione dei documenti</h1>
<article>
<h2>Relazione trimestrale.pdf</h2>
<p>Ultima modifica: 14 settembre 2026</p>
<button
type="button"
data-open-dialog
aria-controls="delete-dialog">
Elimina documento
</button>
<p>
<a href="/documenti/elimina/relazione-trimestrale">
Elimina senza finestra di conferma
</a>
</p>
</article>
<dialog id="delete-dialog" aria-labelledby="dialog-title">
<form method="dialog">
<h2 id="dialog-title">Conferma eliminazione</h2>
<p>
Vuoi eliminare definitivamente
<strong>Relazione trimestrale.pdf</strong>?
</p>
<menu>
<li>
<button type="submit" value="cancel">
Annulla
</button>
</li>
<li>
<button
type="submit"
value="delete"
formaction="/documenti/elimina/relazione-trimestrale">
Elimina definitivamente
</button>
</li>
</menu>
</form>
</dialog>
</main>
<script>
const dialog = document.querySelector("#delete-dialog");
const openButton = document.querySelector("[data-open-dialog]");
// Verifica esplicita del supporto nativo al tag dialog.
const dialogSupported =
dialog instanceof HTMLDialogElement &&
typeof dialog.showModal === "function";
if (dialogSupported) {
openButton.addEventListener("click", () => {
dialog.showModal();
});
} else {
// Il collegamento alternativo resta disponibile.
openButton.hidden = true;
}
dialog.addEventListener("close", () => {
if (dialog.returnValue === "delete") {
dialog.querySelector("form").requestSubmit();
}
});
</script>Spiegazione
La struttura di base
L´elemento <dialog> contiene il messaggio e le azioni disponibili. L´attributo id permette di identificarlo, mentre aria-labelledby collega la finestra al titolo interno. In questo modo le tecnologie assistive possono annunciare correttamente lo scopo della finestra.
Il pulsante principale contiene aria-controls="delete-dialog". Questo attributo comunica quale elemento viene controllato, senza sostituire il comportamento JavaScript. Il pulsante è inizialmente un normale elemento HTML: se lo script non viene eseguito, il collegamento alternativo presente subito sotto resta utilizzabile.
showModal() e chiusura del dialogo
Il metodo showModal() apre il dialogo in modalità modale. Il browser può occuparsi della gestione del focus e impedire l´interazione con il contenuto esterno mentre la finestra è aperta. Un <dialog> può essere chiuso tramite un pulsante contenuto in un form con method="dialog".
Quando il form viene inviato, il valore del pulsante premuto viene assegnato alla proprietà returnValue. Il codice controlla questo valore nell´evento close: solo se l´utente ha scelto delete viene inviato il form verso l´URL di eliminazione.
Perché il fallback è importante
Un errore comune consiste nel mostrare soltanto un pulsante che dipende da JavaScript. Se lo script non funziona, il pulsante diventa inutile. In questo esempio il collegamento alternativo esegue comunque l´operazione richiesta, anche se senza la finestra modale.
Lo script verifica inoltre la presenza di HTMLDialogElement e del metodo showModal(). Se il browser non supporta l´API, il pulsante viene nascosto e rimane disponibile il collegamento tradizionale. Questa è una forma concreta di progressive enhancement: la funzionalità di base viene prima, l´interfaccia avanzata dopo.
Best practice
- Usa
<dialog>per interazioni brevi e contestuali, non per contenuti fondamentali alla navigazione. - Fornisci sempre un percorso alternativo tramite HTML, collegamento o pagina dedicata.
- Associa il dialogo a un titolo con
aria-labelledbye usa testi comprensibili per i pulsanti. - Preferisci
type="button"per i pulsanti che aprono la finestra, così non inviano accidentalmente un form. - Gestisci esplicitamente l´azione di annullamento. La chiusura con
Escnon deve eseguire operazioni distruttive. - Non affidarti esclusivamente al controllo del browser: l´eliminazione deve essere verificata anche sul server.
- Testa il comportamento in browser moderni, browser meno recenti, modalità con JavaScript disabilitato e con tastiera בלבד.
- Verifica che l´operazione critica sia raggiungibile anche quando il dialogo non viene visualizzato.
Riepilogo
Il tag <dialog> offre un modo semantico per costruire finestre modali, ma la compatibilità non consiste soltanto nel controllare se un browser supporta una determinata API. Un´interfaccia realmente resistente deve continuare a funzionare anche senza JavaScript o senza il supporto nativo del componente.
La strategia migliore è partire da HTML significativo, offrire un´azione alternativa e aggiungere l´apertura modale soltanto quando le funzionalità necessarie sono disponibili. In questo modo gli utenti dei browser moderni ottengono un´esperienza più comoda, mentre gli altri non vengono esclusi dal flusso principale.
Approfondisci con risorse ufficiali
- MDN Web Docs:
<dialog>— https://developer.mozilla.org/docs/Web/HTML/Element/dialog - MDN Web Docs:
HTMLDialogElement— https://developer.mozilla.org/docs/Web/API/HTMLDialogElement - WHATWG HTML Standard: dialog element — https://html.spec.whatwg.org/multipage/forms.html#the-dialog-element
- web.dev: dialog component — https://web.dev/articles/dialog