
Los formularios en la web son una herramienta fundamental para la interacción del usuario. Sin embargo, cuando un formulario se envía automáticamente sin el consentimiento explícito del usuario, puede generar confusión y dificultades de navegación. Esto es especialmente problemático para personas con discapacidades visuales o motoras, quienes pueden perder el contexto de la acción realizada o activar involuntariamente el envío del formulario.
El fallo común F36 incumple el Criterio de Conformidad 3.2.2 – Al recibir entradas de las WCAG 2.1, el cual establece que el cambio de contexto no debe ocurrir automáticamente sin previo aviso.
¿Por qué es un problema?
- Usuarios con discapacidad visual pueden no darse cuenta de que se ha enviado el formulario y estar desorientados en la nueva página.
- Usuarios con movilidad reducida pueden activar el envío por accidente al intentar navegar entre los campos.
- Usuarios con problemas cognitivos pueden necesitar revisar la información antes de enviarla.
Acerca de este fallo
Este fallo ocurre cuando:
- Un formulario se envía automáticamente al completar el último campo sin necesidad de presionar un botón de envío.
- Un formulario se envía cuando un usuario selecciona una opción en un menú desplegable sin advertencia previa.
- No se proporciona una confirmación o revisión previa antes del envío de la información.
Este comportamiento inesperado puede generar confusión y errores en la interacción, afectando la accesibilidad del sitio web.
Ejemplos
Ejemplo incorrecto 1: Envío automático al salir del último campo
Código incorrecto:
<input type=»text» name=»text1″ size=»3″ maxlength=»3″> –
<input type=»text» name=»text2″ size=»3″ maxlength=»3″> –
<input type=»text» name=»text3″ size=»4″ maxlength=»4″
onchange=»form1.submit();»></form>
🔴 Problema:
- El formulario se envía automáticamente cuando el usuario sale del último campo.
- Un usuario que solo quería revisar su información puede activar el envío sin querer.
- Los lectores de pantalla pueden no advertir al usuario que el formulario se ha enviado.
Solución correcta
Código corregido:
<input type=»text» name=»text1″ size=»3″ maxlength=»3″> –
<input type=»text» name=»text2″ size=»3″ maxlength=»3″> –
<input type=»text» name=»text3″ size=»4″ maxlength=»4″>
<button type=»submit»>
Enviar</button></form>
✅ ¿Qué mejora?:
- Se ha añadido un botón de envío para que el usuario tenga el control.
- Se permite la revisión del formulario antes del envío.
- Se mejora la accesibilidad y la experiencia del usuario.
Ejemplo incorrecto 2: Envío automático al seleccionar una opción en un menú
Código incorrecto:
<input type=»text» name=»text1″>
<select name=»select1″
onchange=»form2.submit();»><option>Opción 1</option>
<option>Opción 2</option>
<option>Opción 3</option>
</select>
</form>
🔴 Problema:
- El formulario se envía automáticamente al seleccionar una opción, sin que el usuario pueda revisar su selección.
- Los usuarios con movilidad reducida pueden activar el envío accidentalmente.
- Los usuarios con lectores de pantalla pueden no darse cuenta del cambio de contexto.
Solución correcta
Código corregido:
<input type=»text» name=»text1″>
<select name=»select1″>
<option>Opción 1</option>
<option>Opción 2</option>
<option>Opción 3</option>
</select>
<button type=»submit»>
Enviar</button></form>
✅ ¿Qué mejora?:
- Se ha eliminado el envío automático al seleccionar una opción.
- Se permite que el usuario revise y confirme su elección con un botón de envío.
- Se evita la activación involuntaria del formulario.
Errores comunes y cómo evitarlos
Errores frecuentes
- Usar
onchange="form.submit()"en el último campo del formulario. - Enviar el formulario al cambiar de opción en un menú desplegable sin advertencia.
- No proporcionar un botón de envío explícito.
Cómo evitar estos errores:
- Siempre proporcionar un botón de envío.
- Incluir una advertencia previa si el formulario debe enviarse automáticamente por alguna razón.
- Evitar cambios de contexto sin el control del usuario.
Preguntas frecuentes sobre el fallo común F36
¿Por qué no se deben enviar formularios automáticamente?
Porque puede generar confusión y problemas de accesibilidad, especialmente para usuarios con discapacidades visuales o motoras.
¿Es recomendable usar onchange en formularios?
No, a menos que el usuario esté informado de antemano y haya una opción para cancelar el envío.
¿Cómo saber si mi formulario tiene este problema?
Prueba navegar por el formulario con el teclado y verifica si el envío ocurre sin presionar un botón.
¿Los formularios deben siempre requerir confirmación?
No siempre, pero es una buena práctica dar la opción de revisar antes del envío.
¿Qué pasa si quiero un formulario que se envíe automáticamente?
Debes asegurarte de que el usuario lo sepa y tenga la posibilidad de detener el envío antes de que ocurra.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F36: Incumplimiento del Criterio de Conformidad 3.2.2 debido a que se envía automáticamente un formulario y se le asigna un valor
- Comprender el criterio de éxito 3.2.2: En la entrada (On Input)
Pruebas y validación
Procedimiento
- Introducir datos en todos los campos de un formulario.
- Navegar con la tecla
Tabhasta el último campo. - Salir del último campo y observar si el formulario se envía automáticamente.
- Seleccionar una opción en un menú desplegable y verificar si se envía el formulario sin confirmación.
Resultados esperados
- ✅ Si el formulario no se envía automáticamente, cumple con las WCAG.
- ❌ Si el formulario se envía sin que el usuario lo confirme, el contenido no es accesible y debe corregirse.
El envío automático de formularios sin previo aviso afecta la accesibilidad y la usabilidad de los sitios web. Para garantizar una experiencia accesible para todos los usuarios, es esencial proporcionar control y previsibilidad en la navegación y el uso de formularios.
📢 Si necesitas ayuda para mejorar la accesibilidad de tus formularios, contáctanos y optimiza tu sitio web para todos los usuarios. 🚀