Accesibilidad ≠ Overlay: cuando una ventana modal bloquea la navegación con teclado
Una ventana emergente puede ayudar a confirmar una compra, iniciar sesión o mostrar información importante. Pero si no gestiona bien el foco y el teclado, puede impedir que una persona complete la tarea.
Una barrera que aparece de repente
Imagina que pulsas «Continuar» y se abre un cuadro de diálogo. La pantalla cambia, pero el lector de pantalla sigue leyendo la página de fondo. O el teclado no alcanza el botón «Cerrar». La tarea queda interrumpida por un componente que debería facilitarla.
Qué es una ventana modal
Un diálogo modal concentra temporalmente la interacción en una tarea. Mientras permanece abierto, el contenido del fondo no debería recibir el foco. No todos los avisos o ventanas emergentes tienen que ser modales: la elección depende de la interacción y debe ser coherente.
El foco debe acompañar a la persona
Al abrir el diálogo, el foco debe trasladarse a un elemento adecuado dentro de él. Durante la interacción modal, Tab y Mayús+Tab recorren sus controles sin saltar al fondo. Al cerrarlo, normalmente el foco vuelve al elemento que lo abrió, salvo que el flujo requiera otra ubicación lógica.
Un nombre claro y controles reconocibles
El diálogo necesita un título o nombre accesible y, cuando resulte útil, una descripción asociada. Los botones deben comunicar su función: «Guardar cambios», «Cancelar» o «Cerrar». El icono de una X, por sí solo, no siempre ofrece un nombre comprensible al lector de pantalla.
Cerrar sin quedar atrapado
En la mayoría de los diálogos, Escape debe permitir cerrar la ventana. Las acciones destructivas o los procesos que requieren confirmación necesitan un diseño específico, pero nunca deberían dejar a la persona sin una forma comprensible de avanzar o retroceder.
Los problemas más frecuentes
Foco perdido detrás de la ventana, elementos del fondo todavía activables, mensajes que no se anuncian, ventanas que se cierran inesperadamente y botones fuera de la pantalla al ampliar el texto. Son fallos que deben comprobarse en el funcionamiento real.
Cómo probarlo correctamente
Abre el diálogo usando solo el teclado. Comprueba dónde aparece el foco, recorre todos los controles con Tab y Mayús+Tab, prueba Escape cuando corresponda y verifica dónde vuelve el foco al cerrar. Repite con NVDA, JAWS, VoiceOver o TalkBack según los dispositivos que utilice tu público.
Qué aporta Blind Reader
Blind Reader ayuda a orientarse en la página, identificar objetivos y navegar junto a los lectores de pantalla habituales. Sus correcciones puntuales pueden facilitar determinadas interacciones. La gestión correcta del foco y del comportamiento modal debe formar parte del propio componente para ofrecer una experiencia predecible.
Diseñar diálogos que permitan continuar
Una ventana modal accesible no se limita a mostrarse: permite comprender qué ha ocurrido, tomar una decisión y regresar al recorrido sin perderse. La accesibilidad se demuestra completando la tarea.
Fuentes y referencias
Entrega 20 · Accesibilidad ≠ Overlay