Una ventana sobre la página puede servir para confirmar una acción o mostrar un formulario breve. También puede convertirse en una barrera si no se sabe dónde está el foco, cómo cerrarla o qué pasó con el contenido anterior. El problema suele quedar oculto en una demostración hecha solo con ratón. Para un negocio que utiliza una ventana de solicitud de presupuesto, la revisión necesita cubrir entrada, interacción y regreso. Una superficie que parece funcionar visualmente no garantiza que se comporte como un diálogo comprensible para otras formas de navegación.
Preguntar si la ventana es necesaria
Antes de diseñar el comportamiento, considera si el contenido podría vivir dentro de la página. Una explicación larga o una tarea con varios pasos quizá necesita una pantalla propia. La ventana tiene sentido cuando existe una relación clara con la acción que la abrió y un alcance acotado. Evita interrupciones automáticas que aparecen antes de que la persona entienda la oferta. Para solicitar presupuesto, un acceso explícito permite elegir cuándo comenzar. Si la ventana se utiliza solo para destacar una promoción, revisa si el mismo objetivo puede lograrse mediante un bloque visible que no interrumpa lectura ni navegación.
Definir entrada y nombre del diálogo
WAI describe el patrón de diálogo modal y el manejo del foco dentro de él. La ventana necesita un título o nombre comprensible y un punto inicial de interacción apropiado. No envíes automáticamente al último botón por conveniencia técnica. Si contiene instrucciones, considera cómo se conocerán antes de completar campos. El fondo no debería seguir comportándose como si fuera la superficie activa mientras el diálogo exige una decisión. Pide una demostración con teclado y tecnología de asistencia, porque ver un panel centrado no demuestra que el sistema lo identifique correctamente como la nueva interacción disponible.
Ofrecer cierre y retorno previsibles
El control de cierre debe tener un nombre claro y ser alcanzable. Comprueba el comportamiento de Escape cuando corresponda al patrón y define qué ocurre con información no enviada. Si cerrar descarta cambios, evalúa cómo advertirlo sin añadir confirmaciones innecesarias a tareas triviales. Al terminar, la interacción debería regresar a un lugar razonable, normalmente relacionado con el control que abrió la ventana. No dejes el foco perdido detrás del contenido o al comienzo de toda la página sin motivo. La persona necesita reconocer que terminó una tarea breve y puede continuar desde el contexto que tenía antes.
Probar contenido largo y pantallas pequeñas
Abre la ventana con zoom, altura reducida y mensajes de error. Comprueba que todos los campos y botones pueden alcanzarse y que el cierre no desaparece fuera de la zona desplazable. Prueba abrir, cancelar, volver a abrir y completar correctamente, sin enviar datos reales en un ambiente de revisión. No olvides estados de carga o fallo. Una ventana puede funcionar vacía y romperse cuando aparece una explicación adicional. Documenta estos comportamientos en el componente compartido para que futuras promociones o formularios utilicen una base comprobada y no reintroduzcan obstáculos al copiar únicamente su apariencia visual.
DE LA LECTURA A LA ACCIÓN
Para aplicar hoy
- Utiliza una ventana solo cuando su alcance y relación con la página sean claros.
- Revisa nombre, foco y fondo como partes del mismo comportamiento.
- Comprueba cierre, retorno y contenido largo en pantallas pequeñas.
Fuentes y referencias
Documentación para profundizar. Los ejemplos de esta guía son didácticos.