Roles de diálogo y el elemento nativo dialog
Marque una capa como un verdadero cuadro de diálogo modal.
Roles de diálogo y el elemento nativo dialog es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What Makes a Dialog a Dialog
A dialog is a layer that interrupts the page to ask for input or show a message. Screen reader users need to be told it is a dialog, not just floating text.
A div Looks Modal but Is Not
A styled div can look like a popup, yet assistive tech sees ordinary content. Without the right role, users never learn a dialog opened.
<div class="modal">Are you sure?</div>Meet the Native dialog Element
The HTML dialog element is built for this job. It carries dialog semantics for free, so screen readers announce it correctly.
<dialog>Are you sure?</dialog>Open It as a True Modal
Call showModal() in JavaScript to open dialog as a real modal. This is what makes the page behind it inert and unreachable.
document.querySelector("dialog").showModal();show() Is Not Modal
Watch out: show() opens the dialog as non-modal, so the page stays interactive behind it. For a blocking dialog, you want showModal().
dialog.show();The role Behind dialog
Under the hood, the element maps to the dialog role. If you must build one from a div, role="dialog" is the attribute that gives it meaning.
<div role="dialog">Settings</div>alertdialog for Urgent Choices
When a dialog demands a response, like a delete confirmation, use role="alertdialog". It signals extra urgency to assistive tech.
<div role="alertdialog">Delete this file?</div>Every Dialog Needs a Name
A dialog must have an accessible name so users know its purpose on open. Point aria-labelledby at the heading inside it.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Close It in Code
The native element offers a matching close() method. Calling it dismisses the dialog and lets the page behind become reachable again.
dialog.close();The Built-In Backdrop
A modal dialog gets a free backdrop you can style with the ::backdrop pseudo-element. It dims the page and signals focus has shifted.
dialog::backdrop { background: rgba(0,0,0,0.5); }Why Native Saves You Work
The native dialog handles focus, Escape, and inerting the background for you. Reaching for it means fewer bugs than a hand-rolled div.
Quick Check
You want a confirmation popup that blocks the page until the user responds. Which call should you use?
Recap: Use Real Dialogs
You learned a modal needs dialog semantics. Prefer the native dialog with showModal(), give it a name, and reserve alertdialog for urgent choices.
Preguntas frecuentes
¿La lección «Roles de diálogo y el elemento nativo dialog» es gratis?
Sí — el texto completo de «Roles de diálogo y el elemento nativo dialog» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Roles de diálogo y el elemento nativo dialog»?
Marque una capa como un verdadero cuadro de diálogo modal. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Roles de diálogo y el elemento nativo dialog»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Roles de diálogo y el elemento nativo dialog
- Atrapar el foco dentro del modal
- Escape para cerrar y restaurar el foco
- Fondo inerte y aria-modal