Chiudere con Escape e ripristinare il focus

Un modale da cui non si può uscire è una trappola. Gli utenti si aspettano un modo rapido e affidabile per close senza dover cercare un pulsante minuscolo.

Il tasto Escape è la scorciatoia condivisa per chiudere un dialog. Gli utenti della tastiera e degli screen reader lo usano per primo, quindi lo supporti sempre.

Un dialog nativo aperto con showModal() si chiude automaticamente con Escape, attivando un evento cancel che può intercettare se necessario.

Per un modale personalizzato, intercetti l'evento keydown e lo chiuda quando il tasto è Escape. Bastano poche righe, ma non lo ometta mai.

Prima di aprire il modale, salvi l'elemento che aveva il focus. document.activeElement è l'elemento di attivazione a cui tornerà in seguito.

Quando il modale si chiude, riporti il focus sull'elemento di attivazione salvato. Questo passaggio di restore focus rende la chiusura fluida.

Senza il ripristino, il focus salta all'inizio della pagina. L'utente perde il punto in cui si trovava e deve premere Tab fino a tornarci. È frustrante e si può evitare. 😕

Escape da solo non basta. Offra un close button con un'etichetta chiara, così anche gli utenti del mouse e del touchscreen hanno un'uscita evidente.

Molti modali si chiudono anche facendo clic sullo backdrop oscurato. È un'aggiunta utile, ma non deve mai sostituire Escape o il pulsante.

Per i dialog che confermano un'azione rischiosa, può disabilitare la dismissal rapida, così un Escape premuto per errore non salta una scelta importante.

Apra il modale con la tastiera, prema Escape e verifichi che il focus torni esattamente sull'elemento di attivazione da cui era partito. Questo percorso completo è l'obiettivo. ✅

Ha imparato a supportare Escape, offrire un pulsante di chiusura visibile e ripristinare il focus sull'elemento di apertura, così la chiusura non lascia mai l'utente senza un punto di riferimento. 🎯