Fallo Común F37 de WCAG 2.1: Inicio de una nueva ventana sin previo aviso

La accesibilidad digital es esencial para garantizar que todas las personas, incluidas aquellas con discapacidades, puedan navegar y utilizar los sitios web sin barreras. Uno de los problemas más comunes es el cambio inesperado de contexto cuando un usuario interactúa con elementos de un formulario, lo que puede causar confusión o frustración.

Un ejemplo típico de este problema es cuando seleccionar una opción en un botón de radio, casilla de verificación o lista de selección abre una nueva ventana sin previo aviso. Este error infringe el criterio 3.2.2 de las WCAG 2.1, que establece que los cambios de contexto no deben ocurrir sin que el usuario los espere.

Acerca de este fallo

Este fallo ocurre cuando la selección de un elemento en un formulario provoca la apertura de una nueva ventana sin advertencia previa. Afecta a usuarios con discapacidades visuales, cognitivas y motoras, ya que pueden no darse cuenta del cambio o perder el contexto de la navegación.

Este problema es particularmente relevante para usuarios que dependen de tecnologías de asistencia, ya que los cambios inesperados pueden interrumpir su flujo de interacción con la página web.

Escenarios comunes donde ocurre este fallo:

• Un botón de radio abre una nueva página inmediatamente al seleccionarse.
• Una lista de selección redirige a otro sitio web sin intervención adicional del usuario.
• Una casilla de verificación activa una ventana emergente sin previo aviso.

Ejemplos

Ejemplo incorrecto 1

Este ejemplo incumple el criterio 3.2.2 porque procesa el formulario al seleccionar una opción sin un botón de envío.

<script>
function goToMirror(theInput) {
    var mirrorSite = "https://download." + theInput.value + "/";
    window.open(mirrorSite);
}
</script>

<form name="mirror_form" id="mirror_form" action="" method="get">
  <p>Seleccione un sitio de descarga de espejo:</p>
  <p>
    <input type="radio" onclick="goToMirror(this);" name="mirror" id="mirror_belnet" value="belnet.be" />
    <label for="mirror_belnet">belnet (BE)</label><br />
    
    <input type="radio" onclick="goToMirror(this);" name="mirror" id="mirror_surfnet" value="surfnet.nl" />
    <label for="mirror_surfnet">surfnet (NL)</label><br />
  </p>
</form>

🔴 Problema:

• La nueva ventana se abre inmediatamente sin previo aviso.
• No hay un botón de envío que indique al usuario que su selección causará un cambio de contexto.

Solución correcta

Se debe incluir un botón de envío para que el usuario confirme su selección antes de que ocurra el cambio de contexto.

<form name="mirror_form" id="mirror_form" action="mirror_redirect.html" method="get">
  <p>Seleccione un sitio de descarga de espejo:</p>
  <p>
    <select name="mirror" id="mirror">
      <option value="belnet.be">belnet (BE)</option>
      <option value="surfnet.nl">surfnet (NL)</option>
    </select>
  </p>
  <button type="submit">Ir al sitio de descarga</button>
</form>

✅ ¿Qué mejora?:

• Se requiere una acción explícita (hacer clic en el botón) para cambiar el contexto.
• El usuario tiene control sobre el proceso.

Errores comunes y cómo evitarlos

Errores frecuentes

• Abrir una nueva ventana o pestaña sin previo aviso.
• Utilizar eventos onchange para redirigir a los usuarios inmediatamente.
• No proporcionar un botón de envío.

Cómo evitar estos errores

• Informar al usuario sobre cualquier cambio de contexto antes de que ocurra.
• Usar un botón de envío para permitir la confirmación.
• Implementar etiquetas y mensajes accesibles que describan la acción esperada.

Preguntas frecuentes sobre el fallo común F37

¿Por qué abrir una nueva ventana sin previo aviso es un problema de accesibilidad?

Puede desorientar a los usuarios con discapacidades visuales y cognitivas, y afectar a quienes utilizan lectores de pantalla o navegan con teclados.

¿Cómo puedo informar al usuario de que una acción abrirá una nueva ventana?

Puedes agregar un texto indicativo, como «(se abrirá en una nueva ventana)» al lado del enlace o botón.

¿Es correcto usar target="_blank" en los enlaces?

Sí, pero solo si informas claramente al usuario que el enlace se abrirá en una nueva ventana o pestaña.

¿Los cambios automáticos en formularios siempre son problemáticos?

No siempre, pero si generan cambios de contexto sin advertencia, incumplen las WCAG.

¿Puedo usar onchange si agrego un mensaje de advertencia?

Es mejor evitarlo. La mejor práctica es requerir una acción explícita del usuario.

¿Las WCAG permiten alguna excepción para este fallo?

Solo si el cambio de contexto es esperado y beneficioso para la experiencia del usuario.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F37: Incumplimiento del Criterio de Conformidad 3.2.2 debido al inicio de una nueva ventana sin previo aviso cuando se cambia la selección de un botón de opción, casilla de verificación o lista de selección
• Comprender el criterio de éxito 3.2.2: En la entrada (On Input)
• Técnica G80: Proporcionar un botón de envío

Pruebas y validación

Procedimiento

1. Identificar formularios en la página.
2. Verificar si la selección de un elemento cambia el contexto (abre una ventana, redirige, etc.).
3. Confirmar si hay una advertencia previa o una acción explícita requerida.

Resultados esperados

• ✅ Si un cambio de contexto ocurre sin previo aviso, el contenido no cumple con WCAG 2.1.
• ❌ Si el usuario debe confirmar la acción, cumple con las normas.

Evitar cambios de contexto inesperados es clave para una web accesible. Implementa formularios correctamente y verifica la conformidad con las WCAG.

¡Si necesitas ayuda con la accesibilidad de tu web, contáctanos!