{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Dialog y popover accesibles

Implementación de capas flotantes con foco controlado, cierre predecible y semántica clara.

Dialog y popover resuelven tareas rápidas, pero si el foco se pierde, bloquean al usuario.

Abrir, interactuar y cerrar son tres fases que deben estar perfectamente controladas.

El usuario tiene que saber en qué contexto está y cómo salir sin depender del ratón.

Este tema te enseña a evitar traps y a devolver foco de forma consistente.

  • Patrones para overlays accesibles en interfaces modernas.
  • Qué validar en overlays de formularios, confirmaciones y menús contextuales.
  • Revisa diálogos de confirmación, filtros, edición rápida y onboarding guiado.
  • Prueba secuencias de teclado completas: abrir con Enter, navegar con Tab y cerrar con Escape.
  • Para popovers informativos, asegura que no secuestran foco si no hace falta interacción.

Claves teóricas

Patrones para overlays accesibles en interfaces modernas.

Aplicación en proyectos reales

Qué validar en overlays de formularios, confirmaciones y menús contextuales.

Revisa diálogos de confirmación, filtros, edición rápida y onboarding guiado.

Prueba secuencias de teclado completas: abrir con Enter, navegar con Tab y cerrar con Escape.

Para popovers informativos, asegura que no secuestran foco si no hace falta interacción.

  • Define estrategia única de gestión de foco para overlays en toda la app.
  • Evita duplicar lógica de cierre en cada componente; centraliza comportamiento.
  • Valida casos borde: apertura repetida, cierre por backdrop y navegación rápida.
  • Documenta diferencia entre modal bloqueante y popover contextual.

Patrón de código

Ejemplo de diálogo nativo con apertura, cierre y retorno de foco.

Accesibilidad Web
13

Dialog y popover accesibles

Implementación de capas flotantes con foco controlado, cierre predecible y semántica clara.

¿Cuánto sabes de Accesibilidad Web?

Código del tema: dialog popover

📘 Teoría

Claves teóricas

Patrones para overlays accesibles en interfaces modernas.

1

Entrada de foco

Al abrir un diálogo, mueve foco al primer control útil dentro del contexto.

2

Cierre siempre disponible

Incluye botón de cierre visible y soporte de tecla Escape.

3

Retorno de foco

Al cerrar, devuelve foco al elemento que abrió el diálogo o popover.

4

Nombre accesible del diálogo

Usa título visible asociado para que se anuncie el propósito del modal.

5

Modal vs no modal

No bloquees fondo si la interacción no requiere exclusividad.

6

Error frecuente

Cerrar visualmente el modal y dejar foco en un elemento oculto.

Aplicación en proyectos reales

Qué validar en overlays de formularios, confirmaciones y menús contextuales.

Revisa diálogos de confirmación, filtros, edición rápida y onboarding guiado.

Prueba secuencias de teclado completas: abrir con Enter, navegar con Tab y cerrar con Escape.

Para popovers informativos, asegura que no secuestran foco si no hace falta interacción.

  • Define estrategia única de gestión de foco para overlays en toda la app.
  • Evita duplicar lógica de cierre en cada componente; centraliza comportamiento.
  • Valida casos borde: apertura repetida, cierre por backdrop y navegación rápida.
  • Documenta diferencia entre modal bloqueante y popover contextual.

Patrón de código

Ejemplo de diálogo nativo con apertura, cierre y retorno de foco.

Dialog con control de foco
<button id="openDialog" type="button">Eliminar proyecto</button>
<dialog id="confirmDialog">
  <h2>Confirmar eliminación</h2>
  <p>Esta acción no se puede deshacer.</p>
  <button id="cancelDialog" type="button">Cancelar</button>
  <button type="button">Eliminar</button>
</dialog>

🧪 Aprende probando

Ejemplo Demo guiada Abre y cierra un diálogo asegurando foco de entrada y retorno.
⌄

🏁 Retos

Reto Reto práctico Corrige un modal que se cierra sin devolver foco al disparador.
⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide
Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web
Recursos del curso 25
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards
‹
Lección 12
ARIA sin sobreuso: fundamentos
Lección 14
Feedback dinámico con aria-live
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .