La accesibilidad digital garantiza que todas las personas puedan interactuar cómodamente con sitios web y aplicaciones, independientemente de sus capacidades. WCAG 2.1 establece criterios específicos para evitar errores que generan frustración y confusión, como el fallo F60, relacionado con la apertura automática de nuevas ventanas tras introducir texto en formularios.
Según estudios recientes, las ventanas emergentes inesperadas pueden aumentar en más del 40% la tasa de abandono de formularios web.
Acerca de este fallo
El fallo F60 ocurre cuando, al ingresar texto en un campo de formulario, se lanza automáticamente una nueva ventana (no relacionada con correcciones o validaciones del formulario). Esto incumple directamente el Criterio de Éxito 3.2.5: «Cambios a petición» de WCAG 2.1.
El problema principal es que la apertura inesperada de nuevas ventanas rompe la continuidad de navegación y genera desorientación en los usuarios, especialmente aquellos con discapacidades cognitivas o visuales que dependen de lectores de pantalla.
Escenarios comunes del fallo:
- Formularios promocionales que abren ventanas emergentes con publicidad al completar ciertos campos.
- Formularios que muestran automáticamente información no solicitada en nuevas ventanas al introducir datos personales.
Ejemplos
Ejemplo incorrecto 1: Ventana publicitaria emergente al ingresar código postal
<form>
<label for="codigo-postal">Código Postal:</label>
<input type="text" id="codigo-postal" name="codigo-postal" onchange="abrirPublicidad()">
</form>
<script>
function abrirPublicidad(){
window.open("publicidad.html", "Publicidad", "width=400,height=400");
}
</script>🔴 Problema: La ventana publicitaria se abre inesperadamente, interrumpiendo y desorientando al usuario.
Solución correcta: Sin apertura automática de ventanas
<form>
<label for="codigo-postal">Código Postal:</label>
<input type="text" id="codigo-postal" name="codigo-postal">
<button type="button" onclick="abrirPublicidad()">Ver promociones</button>
</form>
<script>
function abrirPublicidad(){
window.open("publicidad.html", "Publicidad", "width=400,height=400");
}
</script>✅ ¿Qué mejora?: El usuario tiene el control absoluto sobre cuándo se abre la nueva ventana.
Ejemplo incorrecto 1: Nueva ventana tras escribir dirección
<input type="text" id="direccion" onblur="mostrarVentana()">
<script>
function mostrarVentana(){
window.open("informacion-extra.html", "Info", "width=500,height=300");
}
</script>🔴 Problema: Abre una ventana automáticamente sin una acción explícita del usuario, rompiendo la experiencia.
Solución correcta: Uso explícito mediante enlace o botón
<input type="text" id="direccion">
<button type="button" onclick="mostrarVentana()">Más información</button>
<script>
function mostrarVentana(){
window.open("informacion-extra.html", "Info", "width=500,height=300");
}
</script>✅ ¿Qué mejora?: El usuario controla cuándo y cómo abrir la ventana adicional.
Solución correcta: implementación ideal
<form>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email">
<button type="button" onclick="validarEmail()">Validar Correo</button>
</form>
<script>
function validarEmail(){
// validación sin abrir ventanas no deseadas
alert("El correo electrónico es válido.");
}
</script>✅ ¿Qué mejora?: Ninguna ventana se abre automáticamente, respetando completamente el criterio WCAG.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Apertura automática de ventanas emergentes al completar campos.
- No advertir previamente sobre la apertura de nuevas ventanas.
Cómo evitar estos errores:
- No abrir ventanas automáticamente.
- Proporcionar botones o enlaces claros para acciones adicionales.
- Informar explícitamente al usuario cuando una acción implique la apertura de nuevas ventanas.
Preguntas frecuentes sobre el fallo F60
¿Por qué es un problema abrir ventanas automáticamente?
Interrumpe y desorienta al usuario, especialmente si usa tecnologías asistivas.
¿Hay situaciones en que abrir ventanas automáticamente esté permitido?
Solo si son esenciales para validaciones o errores del formulario, no publicidad o contenido extra.
¿Cuál es la alternativa recomendada a este comportamiento?
Utilizar botones o enlaces para permitir que el usuario abra ventanas adicionales voluntariamente.
¿Abrir ventanas automáticas afecta al SEO?
Sí, perjudica la experiencia del usuario, impactando negativamente en el posicionamiento web.
¿Cómo pruebo mi web contra este fallo?
Revisa tus formularios y comprueba manualmente o usa herramientas automáticas.
¿Qué consecuencias genera ignorar este criterio?
Mayor abandono, menos conversiones y peor percepción de tu marca.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F60: Incumplimiento del Criterio de Conformidad 3.2.5 debido al inicio de una nueva ventana cuando un usuario ingresa texto en un campo de entrada
- Comprender el criterio de éxito 3.2.5: Cambio por solicitud
- F37: Fallo del criterio de éxito 3.2.2 debido al lanzamiento de una nueva ventana sin advertencia previa cuando se cambia la selección de un botón de opción, casilla de verificación o lista de selección
Pruebas y validación
Procedimiento
- Identifica todos los campos de formulario.
- Ingresa texto en cada campo.
- Verifica si aparecen ventanas nuevas automáticamente.
- Comprueba si las ventanas emergentes se relacionan únicamente con validaciones o errores.
Resultados esperados
- ✅ Ninguna ventana inesperada se abre sin interacción clara.
- ❌ Ventanas que se abren automáticamente y que no están claramente relacionadas con errores o validaciones indican incumplimiento.
Evitar la apertura inesperada de ventanas es fundamental para garantizar una buena experiencia de usuario y cumplir con la accesibilidad digital. Si quieres mejorar la accesibilidad y usabilidad de tu web, ¡contáctanos y obtén asesoría especializada! 🚀