Fallo Común F9 de WCAG 2.1: Cambio de contexto al perder el foco en un elemento de formulario

La accesibilidad web es clave para garantizar una experiencia de usuario fluida e inclusiva. Uno de los errores más comunes que afectan la usabilidad es el cambio inesperado de contexto cuando un usuario elimina el foco de un elemento de formulario. Este problema incumple el Criterio de Conformidad 3.2.5 (Cambio de Contexto por Solicitud del Usuario) en WCAG 2.1, generando confusión y barreras de accesibilidad para usuarios con discapacidades cognitivas, visuales o motoras.

En este artículo, exploraremos el Fallo Común F9, sus implicaciones en la accesibilidad y las mejores prácticas para solucionarlo.

Acerca de este fallo

El Fallo F9 ocurre cuando una acción tan simple como mover el foco fuera de un campo de formulario provoca un cambio inesperado en la página, como:

• Redirecciones automáticas.
• Cierre inesperado de modales o formularios.
• Carga de nuevo contenido sin aviso previo.

¿Por qué es un problema de accesibilidad?

• Puede desorientar a los usuarios con discapacidades cognitivas o problemas de atención.
• Afecta a personas que navegan con lectores de pantalla, quienes pueden perder el contexto sin una notificación clara.
• Usuarios con movilidad reducida podrían activar cambios involuntarios al navegar con el teclado.

Ejemplos

Ejemplo incorrecto 1: Cambio de página al salir de un campo de entrada

En este ejemplo, un usuario introduce su código postal y, al salir del campo, es redirigido automáticamente a otra página sin previo aviso.

Código Incorrecto:

<input type="text" id="codigo-postal" onblur="window.location.href='nueva-pagina.html';" placeholder="Ingrese su código postal">

🔴 Problema: La redirección ocurre sin previo aviso, causando pérdida de información o confusión.

Solución correcta: Incluir un botón de confirmación

<input type="text" id="codigo-postal" placeholder="Ingrese su código postal">
<button onclick="window.location.href='nueva-pagina.html'">Confirmar</button>

✅ ¿Qué mejora?: Se permite que el usuario decida cuándo proceder, evitando cambios inesperados.

Ejemplo incorrecto 2: Cierre automático de un formulario al perder el foco

En este caso, un usuario está llenando un formulario en un modal. Si accidentalmente hace clic fuera del modal, este se cierra automáticamente sin guardar los datos.

Código Incorrecto:

<div id="modal" onclick="this.style.display='none'">
   <form>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre">
   </form>
</div>

🔴 Problema: Si un usuario con problemas motores mueve el cursor fuera del modal, perderá toda la información ingresada.

Solución correcta: Confirmar antes de cerrar el modal

<div id="modal">
   <form>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre">
      <button id="cerrar">Cerrar</button>
   </form>
</div>

<script>
   document.getElementById("cerrar").addEventListener("click", function() {
      if(confirm("¿Seguro que deseas cerrar el formulario? Los cambios no guardados se perderán.")) {
         document.getElementById("modal").style.display='none';
      }
   });
</script>

✅ ¿Qué mejora?: Ahora, el usuario recibe una advertencia antes de que el modal se cierre.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Redirecciones automáticas al salir de un campo.
• Cierre inesperado de formularios o modales.
• Carga de contenido dinámico sin notificación clara.

Cómo evitar estos errores:

• Permitir siempre la acción del usuario antes de cambiar el contexto.
• Usar alertas o confirmaciones antes de cerrar modales o redirigir.
• Probar la accesibilidad con herramientas como WAVE o axe DevTools.

Preguntas frecuentes sobre el fallo común F9

¿Por qué cambiar el contexto al perder el foco de un campo de formulario es un problema de accesibilidad?
Los cambios de contexto inesperados pueden confundir a los usuarios, especialmente aquellos que dependen de lectores de pantalla o tienen discapacidades cognitivas. Pueden perder la referencia de dónde estaban en el formulario y experimentar dificultades para completar sus datos.

¿Cuáles son ejemplos comunes de cambios de contexto inesperados en formularios?

• Enviar un formulario automáticamente al cambiar de campo.
• Redirigir a otra página sin previo aviso al salir de un campo.
• Abrir una nueva ventana emergente sin que el usuario lo haya solicitado.

¿Cómo puedo evitar que un formulario se envíe automáticamente cuando el usuario cambia de campo?
Asegúrate de que el envío del formulario solo ocurra cuando el usuario haga clic en un botón de «Enviar». Evita el uso de onblur o onchange para ejecutar envíos automáticos sin control del usuario.

¿Cómo pruebo si mi formulario tiene este problema?
Navega por el formulario usando el teclado o un lector de pantalla. Si al moverte de un campo a otro el formulario se envía, se abre una nueva ventana o cambia de página sin previo aviso, tu formulario incumple el Criterio 3.2.5 de WCAG 2.1.

¿Qué técnicas de WCAG pueden ayudar a evitar este fallo?
Puedes seguir la técnica G107 de WCAG, que recomienda usar botones o enlaces explícitos para que el usuario tenga control sobre los cambios de contexto.

¿Cómo afectan estos cambios inesperados a usuarios con discapacidades?

• Los usuarios con lectores de pantalla pueden perder el contexto y la continuidad de la información.
• Las personas con discapacidades cognitivas pueden sentirse desorientadas si la página cambia sin previo aviso.
• Usuarios con movilidad reducida pueden tener dificultades para volver atrás y corregir errores en el formulario.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F9: Incumplimiento del Criterio de Conformidad 3.2.5 debido al cambio de contexto cuando el usuario elimina el foco de un elemento de formulario
• Comprender el criterio de éxito 3.2.5 Cambio de contexto por solicitud del usuario
• F37: Fallo del Criterio 3.2.2 por abrir una nueva ventana sin previo aviso al seleccionar un botón de radio o checkbox
• F60: Fallo del Criterio 3.2.5 por abrir una nueva ventana al introducir texto en un campo de entrada
• G107: Uso de enlaces o botones explícitos para que el usuario controle los cambios de contexto

Pruebas y Validación

Procedimiento

1. Interactuar con los formularios y campos de entrada.
2. Verificar si ocurre un cambio inesperado al eliminar el foco.
3. Confirmar que los cambios de contexto solo ocurren con acción del usuario.

Resultados Esperados

• ✅ Si el cambio de contexto ocurre solo cuando el usuario lo solicita, cumple con WCAG 2.1.
• ❌ Si el cambio ocurre automáticamente sin aviso, falla el Criterio 3.2.5.

Los cambios de contexto inesperados dificultan la navegación y pueden causar confusión en usuarios con discapacidad. Siempre debe ser el usuario quien inicie estos cambios para garantizar una experiencia accesible e inclusiva.

¡Haz que tu sitio web sea predecible y accesible para todos! 💻♿