Fallo Común F22 de WCAG 2.1: Apertura de ventanas no solicitadas por el usuario

Jano Llorca Lis

La accesibilidad web busca garantizar una experiencia de usuario predecible y sin sorpresas inesperadas. Uno de los problemas comunes en sitios web es la apertura de ventanas emergentes sin previo aviso, lo que puede afectar la navegación, causar confusión y dificultar el uso de la web para personas con discapacidades cognitivas o visuales.

El fallo F22 ocurre cuando una página abre nuevas ventanas sin que el usuario lo haya solicitado explícitamente. Esto viola el criterio 3.2.5 – Cambio a petición de WCAG 2.1, ya que interrumpe la experiencia del usuario y dificulta la accesibilidad.

Acerca de este fallo

Este fallo se produce en situaciones donde:

Se abre una ventana emergente cuando el usuario ingresa a una página sin realizar ninguna acción.
Un enlace abre una nueva ventana sin indicar que lo hará.
Un usuario hace clic en un área del sitio que no parece interactiva y se abre una nueva ventana inesperadamente.

Este problema afecta especialmente a:

Personas con discapacidades visuales, que pueden perder el contexto de navegación cuando el foco cambia abruptamente a otra ventana.
Usuarios con discapacidades cognitivas, que pueden confundirse si una nueva ventana se abre sin advertencia.
Usuarios de lectores de pantalla, que pueden no darse cuenta de que han cambiado a una nueva ventana.
Personas con movilidad reducida, para quienes cerrar una ventana emergente inesperada puede ser un desafío adicional.

Ejemplos

Ejemplo incorrecto 1

Escenario: Una página carga automáticamente una ventana emergente de publicidad al abrirse.

Código incorrecto:

<script>
  window.onload = function() {
    window.open("https://publicidad.com", "_blank", "width=600,height=400");
  };
</script>

🔴 Problema:

La nueva ventana se abre sin acción del usuario.
Puede confundir y molestar a los usuarios.
Cambia el foco de la navegación sin previo aviso.

Solución correcta

Código corregido:

<button onclick="window.open('https://publicidad.com', '_blank', 'width=600,height=400');">Ver promoción</button>

✅ ¿Qué mejora?:

El usuario debe hacer clic en un botón antes de que se abra la ventana.
Se ofrece un control claro sobre la acción.

Ejemplo incorrecto 2

Escenario: Un enlace abre una nueva ventana sin indicarlo.

Código incorrecto:

<a href="https://ejemplo.com" target="_blank">Informe de Revisión de Accesibilidad Inditex</a>

🔴 Problema:

No se informa al usuario de que el enlace abrirá una nueva ventana.
Puede confundir a personas que no esperan el cambio.

Solución correcta

Código corregido con advertencia visible:

<a href="https://ejemplo.com" target="_blank">Informe de Revisión de Accesibilidad Inditex (se abrirá en una nueva ventana)</a>

Código corregido con aria-label para accesibilidad:

<a href="https://ejemplo.com" target="_blank" aria-label="Visita ejemplo.com, se abrirá en una nueva ventana">Informe de Revisión de Accesibilidad Inditex</a>

✅ ¿Qué mejora?:

Se informa explícitamente que el enlace abrirá una nueva ventana.
Se añade aria-label para usuarios de lectores de pantalla.

Ejemplo incorrecto 3

Escenario: Un usuario hace clic en cualquier parte de la página y se abre una nueva ventana inesperadamente.

Código incorrecto:

<body onclick="window.open('https://ejemplo.com', '_blank');">

🔴 Problema:

No hay indicación visual de que la página es interactiva.
Cualquier clic accidental abre una nueva ventana.

Solución correcta

Código corregido con un botón claramente identificado:

<button onclick="window.open('https://ejemplo.com', '_blank');">Abrir enlace</button>

✅ ¿Qué mejora?:

Se requiere una acción clara del usuario.
No se generan aperturas inesperadas.

Ejemplo correcto

Práctica ideal:

Usar progresive enhancement para permitir que los usuarios elijan si quieren abrir una nueva ventana.
Ofrecer opciones en la configuración del sitio para desactivar aperturas automáticas.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar window.open() sin acción previa del usuario.
No indicar cuando un enlace abrirá una nueva ventana.
Usar target="_blank" en enlaces sin advertencia previa.
Cambiar el foco sin avisar a los usuarios.

Cómo evitar estos errores:

Solo abrir nuevas ventanas si el usuario lo solicita.
Agregar advertencias visibles y accesibles en los enlaces.
Usar aria-label para informar a usuarios de lectores de pantalla.
Mantener una navegación predecible y sin interrupciones.

Preguntas frecuentes

¿Es incorrecto abrir una nueva ventana siempre?

No, solo cuando no se informa al usuario o se hace sin su acción explícita.

¿Cómo informar correctamente que un enlace abrirá una nueva ventana?

Agregando texto visible o un aria-label que lo indique.

¿Por qué los pop-ups inesperados son problemáticos para la accesibilidad?

Porque interrumpen la navegación y pueden confundir a personas con discapacidades cognitivas o visuales.

¿Cómo evitar que los pop-ups perjudiquen la accesibilidad?

Asegurando que solo se abran cuando el usuario lo decida y avisando previamente.

¿Es recomendable usar target="_blank" en enlaces?

Solo si se informa al usuario de que la nueva ventana se abrirá.

¿Cómo probar si un sitio tiene este fallo?

Navegando con un lector de pantalla y verificando si se abren ventanas sin advertencia.

Recursos relacionados

Pruebas y validación

Procedimiento

Navega por la página web y observa si se abren ventanas emergentes inesperadas.
Haz clic en enlaces y botones para verificar si se abren nuevas ventanas sin previo aviso.
Usa un lector de pantalla y revisa si informa adecuadamente sobre la apertura de nuevas ventanas.
Inspecciona el código para detectar el uso de window.open() o target="_blank" sin advertencia al usuario.
Verifica la experiencia del usuario preguntando si encuentran confusa la navegación debido a ventanas emergentes.

Resultados esperados

✅ Si la página no abre nuevas ventanas sin acción explícita del usuario, cumple con WCAG.
✅ Si los enlaces que abren nuevas ventanas incluyen advertencias claras, cumple con WCAG.
❌ Si las nuevas ventanas se abren sin advertencia ni acción del usuario, hay un fallo de conformidad.
❌ Si un lector de pantalla no anuncia correctamente la apertura de nuevas ventanas, es un fallo de conformidad.

Evitar la apertura de ventanas inesperadas mejora la experiencia del usuario y la accesibilidad. Asegúrate de que las nuevas ventanas solo se abran cuando el usuario lo solicite y de proporcionar advertencias adecuadas. ¿Necesitas ayuda con la accesibilidad de tu web? Contáctanos para optimizarla.

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.