Sfondo inert e aria-modal
Rendere irraggiungibile il resto della pagina mentre la finestra è aperta
Sfondo inert e aria-modal è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 4 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.
La pagina sottostante esiste ancora
Anche con il focus intrappolato, il contenuto dietro il modale è ancora presente nel DOM. Uno screen reader può raggiungerlo, a meno che non lo impedisca.
Entra in scena l'attributo inert
L'attributo inert rende non focalizzabili e non cliccabili un elemento e tutti i suoi discendenti, escludendoli dalle tecnologie assistive con una sola operazione.
<main inert>...page content...</main>Rendere inattivo lo sfondo
Quando il modale si apre, aggiunga inert a tutto ciò che si trova al di fuori. In questo modo la pagina sottostante diventa davvero irraggiungibile per chiunque.
pageContent.inert = true;Rimuovere inert alla chiusura
Quando il modale si chiude, rimuova l'attributo inert affinché la pagina torni interattiva. Se lo dimentica, la pagina rimarrà bloccata.
pageContent.inert = false;Il dialog nativo lo fa per Lei
Un dialog nativo aperto con showModal() rende automaticamente inattivo il resto della pagina, offrendo questa protezione senza codice aggiuntivo.
Che cosa dichiara aria-modal
Aggiungere aria-modal impostato su true comunica alle tecnologie assistive che il contenuto esterno a questo dialog non è disponibile mentre è aperto.
<div role="dialog" aria-modal="true">...</div>aria-modal è una promessa, non una barriera
Attenzione: aria-modal informa soltanto lo screen reader. Non blocca realmente il focus o i clic, quindi deve comunque usare inert.
Usarli insieme
Il modello più robusto abbina inert sullo sfondo ad aria-modal sul dialog. Il primo impone il confine, il secondo lo comunica.
<div role="dialog" aria-modal="true">
<!-- background gets inert -->Il vecchio espediente aria-hidden
Prima che inert fosse ampiamente supportato, gli sviluppatori applicavano aria-hidden allo sfondo. Nascondeva il contenuto agli screen reader, ma non impediva al focus della tastiera di raggiungerlo.
Non nascondere mai il dialog stesso
Un bug classico consiste nell'applicare aria-hidden a un'area così ampia da includere anche il dialog. Si assicuri che il modal rimanga fuori dalla regione nascosta.
Verificare nell'albero
Apra l'accessibility tree del browser mentre il modale è aperto. Verifichi che la pagina sottostante sia scomparsa e che rimanga solo il dialog. ✅
Verifica rapida
Aggiunge aria-modal=true ma omette inert. Quale problema rimane?
Riepilogo: isolare lo sfondo
Ha imparato a rendere inert la pagina sottostante e a dichiarare aria-modal, così il modale è davvero l'unico elemento raggiungibile dagli utenti. 🎯
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 «Sfondo inert e aria-modal» è gratuita?
Sì — il testo completo di «Sfondo inert e aria-modal» è 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 «Sfondo inert e aria-modal»?
Rendere irraggiungibile il resto della pagina mentre la finestra è aperta 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 4 di 4.
Quanto tempo richiede la lezione «Sfondo inert e aria-modal»?
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