Intrappolare il focus nella finestra modale
Impedire a Tab di uscire verso la pagina sottostante
Intrappolare il focus nella finestra modale è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Perché il focus deve restare all'interno
Quando un modale è aperto, il focus della tastiera dovrebbe rimanere al suo interno. Se Tab passa alla pagina sottostante, gli utenti non vedenti si perdono in contenuti che non possono vedere.
L'elemento nativo aiuta
Un vero dialog aperto con showModal() intrappola automaticamente il focus, ed è uno dei motivi principali per preferirlo a un div.
Quando lo crea da sé
Se crea un modale personalizzato con un div, deve trap focus autonomamente, perché nulla impedisce a Tab di passare alla pagina esterna.
Spostare il focus all'interno all'apertura
Per prima cosa, sposti il focus all'interno del modale quando si apre, di solito sul primo controllo o sull'intestazione, così l'utente si trova subito nel punto giusto.
modal.querySelector('button').focus();Individuare gli elementi che ricevono il focus
Raccolga gli elementi focusable del modale: link, pulsanti, campi di input e tutto ciò che ha tabindex. Le servono il primo e l'ultimo per creare il ciclo.
modal.querySelectorAll('a, button, input, [tabindex]');Ciclare dall'ultimo al primo
Quando si preme Tab sull'elemento last, riporti il focus sul primo. In questo modo l'utente ricomincia il ciclo invece di uscire.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Ciclare dal primo all'ultimo
Gestisca anche Shift+Tab sul primo elemento: sposti il focus sull'ultimo, così anche la navigazione all'indietro rimane intrappolata.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Impedire il comportamento predefinito di Tab
Ai margini deve chiamare preventDefault(); altrimenti il browser sposta il focus fuori dal modale prima che il codice possa reindirizzarlo.
e.preventDefault();Considerare gli elementi disabilitati e nascosti
Ignori gli elementi disabled o nascosti quando sceglie il primo e l'ultimo, perché non possono ricevere effettivamente il focus.
Non dimenticare lo sfondo
L'intrappolamento del focus deve essere abbinato all'inattivazione della pagina sottostante, rendendola inert, così nemmeno un clic involontario o uno screen reader può raggiungerla mentre il modale è aperto.
Eseguire il test con la tastiera
Premere Tab in tutto il modale e osservi il focus ring compiere il ciclo senza mai uscire. Questo percorso completo dimostra che l'intrappolamento funziona. ✅
Verifica rapida
Ha creato un modale personalizzato con un div. Che cosa deve fare per mantenere Tab al suo interno?
Riepilogo: mantenere il focus intrappolato
Ha imparato a spostare il focus all'interno all'apertura e a farlo ciclare su entrambi i margini, così gli utenti della tastiera rimangono nel modale finché non scelgono di chiuderlo. 🎯
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Intrappolare il focus nella finestra modale» è gratuita?
Sì — il testo completo di «Intrappolare il focus nella finestra modale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Intrappolare il focus nella finestra modale»?
Impedire a Tab di uscire verso la pagina sottostante Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Intrappolare il focus nella finestra modale»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Ruoli dialog e l'elemento dialog nativo
- Intrappolare il focus nella finestra modale
- Chiudere con Escape e ripristinare il focus
- Sfondo inert e aria-modal