Fallo común WCAG 2.2
F22Ventanas o pestañas nuevas que se abren sin avisar
Nombre oficial en el W3C: Fallo del criterio de conformidad 3.2.5 debido a abrir ventanas que el usuario no ha solicitado
En pocas palabras
Este error se da cuando se abre una ventana o pestaña nueva sin que la persona lo espere. Ocurre con ventanas emergentes que salen al cargar la página y con enlaces que abren otra pestaña sin decirlo. Abrir ventanas nuevas no está prohibido, pero hay que avisar antes.
Por qué es importante
Una ventana nueva cambia el contexto: la persona pasa a otro sitio sin haberlo pedido.
- Quien usa lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) puede no notar el cambio. Después el botón Atrás no funciona y cree que la web falla.
- Quien usa un ampliador quizá no ve que se ha abierto otra ventana.
- Las personas con dificultades cognitivas pueden perderse entre varias ventanas.
Cómo evitarlo
- Abra los enlaces en la misma ventana por defecto. Revise el gestor de contenidos, que a menudo añade
target="_blank"a los PDF y enlaces externos. - Si un enlace debe abrir otra ventana, dígalo en su texto: «(se abre en una ventana nueva)». Si usa un icono, dele un texto alternativo con ese aviso.
- No confíe solo en el atributo
title. No se ve con teclado ni en pantallas táctiles, y muchos lectores no lo leen. - No abra ventanas emergentes al cargar la página ni al pulsar zonas que no parecen enlaces o botones.
- Para avisos o formularios breves, use mejor un cuadro de diálogo dentro de la misma página.
Ejemplo práctico
Es habitual en sedes electrónicas y webs municipales. Abren documentos o trámites en otra pestaña con target="_blank" sin decirlo. También hay ventanas emergentes que se abren solas al cargar la página.
Así no: Enlaces que abren otra ventana sin avisar
Los dos enlaces llevan target="_blank", pero su texto no lo dice. Al activarlos se abre una pestaña nueva y el botón Atrás deja de funcionar. Quien usa lector de pantalla o ampliador no sabe que ha cambiado de ventana.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<p>Convocatoria de ayudas al alquiler para jóvenes 2026.</p>
<ul>
<li>
<a href="#bases" target="_blank" rel="noopener">
Bases de la convocatoria (PDF, 320 kB)
</a>
</li>
<li>
<a href="#sede" target="_blank" rel="noopener">
Presentar la solicitud en la sede electrónica
</a>
</li>
</ul>Así sí: Aviso visible en el texto del enlace
Cada enlace incluye el texto «(se abre en una ventana nueva)». Se ve en pantalla y forma parte del nombre que anuncia el lector de pantalla. Así la apertura ya no sorprende. Otra opción igual de válida es quitar target="_blank" y abrir en la misma ventana.
Pruébelo aquí:
Ver el código del ejemplo correcto
<p>Convocatoria de ayudas al alquiler para jóvenes 2026.</p>
<ul>
<li>
<a href="#bases" target="_blank" rel="noopener">
Bases de la convocatoria (PDF, 320 kB)
<span>(se abre en una ventana nueva)</span>
</a>
</li>
<li>
<a href="#sede" target="_blank" rel="noopener">
Presentar la solicitud en la sede electrónica
<span>(se abre en una ventana nueva)</span>
</a>
</li>
</ul>Cómo comprobarlo
Errores frecuentes en auditorías
- El gestor de contenidos pone target="_blank" en todos los enlaces externos y PDF, sin ningún aviso.
- El aviso es solo un icono de flecha, sin texto alternativo ni texto oculto.
- El aviso está solo en el atributo title. No se ve con teclado ni en pantallas táctiles, y muchos lectores no lo leen.
- Ventanas de publicidad, encuestas o chat que se abren con window.open al cargar la página.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F22 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
General
Descripción
Fallo debido a la apertura de ventanas nuevas cuando el usuario no las espera. Las ventanas nuevas desvían el foco de lo que el usuario está leyendo o haciendo. Esto es aceptable cuando el usuario ha interactuado con un elemento de la interfaz de usuario y espera obtener una ventana nueva, como un cuadro de diálogo de opciones. El fallo se produce cuando las ventanas emergentes aparecen de forma inesperada.
Ejemplos
Cuando un usuario navega a una página, aparece una ventana nueva sobre la ventana existente del agente de usuario y el foco se desplaza a la nueva ventana.
Un usuario pulsa en un enlace y aparece una ventana nueva. El enlace original no tiene ningún texto asociado que indique que abrirá una ventana nueva.
Un usuario pulsa en el cuerpo de una página y aparece una ventana nueva. No hay ninguna indicación de que la zona en la que se ha pulsado tenga funcionalidad.
Un usuario pulsa en un texto sin ningún estilo distintivo dentro de la página y aparece una ventana nueva. La página no tiene ninguna indicación visible de que esa zona sea funcional.
Pruebas
Procedimiento
- Cargar la página web.
- Comprobar si se abren ventanas nuevas (adicionales).
- Localizar todos los elementos accionables, como enlaces y botones, de la página web.
- Activar cada elemento.
- Comprobar si al activar el elemento se abre una ventana nueva.
- Comprobar si los elementos que abren ventanas nuevas tienen un texto asociado que indique que eso va a ocurrir. El texto puede mostrarse en el enlace o estar disponible mediante una asociación oculta, como un atributo title de HTML.
Resultados esperados
- Si la comprobación n.º 2 es verdadera, se da la condición de fallo y el contenido falla el criterio de conformidad
- Si la comprobación n.º 5 es verdadera y la comprobación n.º 6 es falsa, se da la condición de fallo y el contenido falla el criterio de conformidad
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F22 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.