Ruoli dialog e l'elemento dialog nativo
Contrassegnare un livello come vera finestra di dialogo modale
Ruoli dialog e l'elemento dialog nativo è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cosa rende un dialog un dialog
Un dialog è un livello che interrompe la pagina per richiedere un input o mostrare un messaggio. Gli utenti di lettori di schermo devono sapere che si tratta di un dialog, non di semplice testo fluttuante.
Un div sembra modale, ma non lo è
Un div con stile può sembrare un popup, ma le tecnologie assistive lo vedono come contenuto ordinario. Senza il ruolo corretto, gli utenti non sapranno mai che è stata aperta una finestra di dialogo.
<div class="modal">Are you sure?</div>Conoscere l'elemento dialog nativo
L'elemento HTML dialog è stato progettato proprio per questo. Include automaticamente la semantica di una finestra di dialogo, quindi gli screen reader la annunciano correttamente.
<dialog>Are you sure?</dialog>Aprirlo come un vero modale
In JavaScript, chiami showModal() per aprire il dialog come un vero modale. È questo che rende inattiva e irraggiungibile la pagina sottostante.
document.querySelector("dialog").showModal();show() non è modale
Attenzione: show() apre il dialog in modalità non modale, quindi la pagina rimane interattiva sullo sfondo. Per una finestra di dialogo bloccante, deve usare showModal().
dialog.show();Il ruolo dietro dialog
Internamente, l'elemento viene associato al dialog role. Se deve crearne uno a partire da un div, role="dialog" è l'attributo che gli conferisce il significato corretto.
<div role="dialog">Settings</div>alertdialog per le scelte urgenti
Quando una finestra di dialogo richiede una risposta, ad esempio per confermare un'eliminazione, usi role="alertdialog". In questo modo segnala alle tecnologie assistive una maggiore urgenza.
<div role="alertdialog">Delete this file?</div>Ogni dialog ha bisogno di un nome
Un dialog deve avere un accessible name, così gli utenti ne conoscono lo scopo quando viene aperto. Imposti aria-labelledby in modo che punti all'intestazione al suo interno.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Chiuderlo nel codice
L'elemento nativo offre il metodo corrispondente close(). Chiamandolo, chiude il dialog e rende nuovamente raggiungibile la pagina sottostante.
dialog.close();Lo sfondo incorporato
Un dialog modale include gratuitamente un backdrop, che può personalizzare con lo pseudo-elemento ::backdrop. Oscura la pagina e segnala che il focus è stato spostato.
dialog::backdrop { background: rgba(0,0,0,0.5); }Perché il nativo fa risparmiare lavoro
Il dialog nativo gestisce automaticamente focus, tasto Escape e l'inattivazione dello sfondo. Sceglierlo significa avere meno bug rispetto a un div creato manualmente.
Verifica rapida
Vuole una finestra di conferma che blocchi la pagina finché l'utente non risponde. Quale chiamata dovrebbe usare?
Riepilogo: usi veri dialog
Ha imparato che un modale ha bisogno della dialog semantics. Preferisca il dialog nativo con showModal(), gli assegni un nome e riservi alertdialog alle scelte urgenti.
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 «Ruoli dialog e l'elemento dialog nativo» è gratuita?
Sì — il testo completo di «Ruoli dialog e l'elemento dialog nativo» è 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 «Ruoli dialog e l'elemento dialog nativo»?
Contrassegnare un livello come vera finestra di dialogo modale 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 1 di 4.
Quanto tempo richiede la lezione «Ruoli dialog e l'elemento dialog nativo»?
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