Fallo común WCAG 2.2
F36Formularios que se envían solos al salir del último campo
Nombre oficial en el W3C: Fallo del criterio de conformidad 3.2.2 debido a enviar automáticamente un formulario y presentar contenido nuevo sin aviso previo cuando se asigna un valor al último campo del formulario
En pocas palabras
El error es enviar un formulario de forma automática cuando la persona rellena el último campo o sale de él, sin pulsar ningún botón. Quien vuelve atrás para revisar un dato o leer una ayuda lo envía sin querer. El envío debe hacerse solo con un botón o con la tecla Intro.
Por qué es importante
Enviar datos o cambiar de página sin que la persona lo pida es un cambio inesperado. Desorienta y provoca errores.
- Quien usa el teclado sale del campo con el tabulador para leer las instrucciones. Si eso envía el formulario, lo envía a medias o sin revisar.
- Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) no ve que la página ha cambiado. Pierde el punto donde estaba.
- Las personas con temblor en las manos o con dificultades de atención se equivocan más y no pueden corregirlo a tiempo.
Cómo evitarlo
- Ponga siempre un botón de envío visible y con un texto claro: «Buscar», «Consultar reserva», «Enviar solicitud».
- No envíe el formulario desde los eventos
blurofocusout(cuando el campo pierde el foco). Tampoco desdechange. - Confíe en el comportamiento normal del navegador. Un formulario con botón de envío ya se envía al pulsar Intro en un campo de texto.
- Evite que una lista desplegable envíe el formulario al elegir una opción. Quien usa el teclado la recorre con las flechas, y cada flecha cambia el valor.
- Si de verdad necesita un envío automático, avíselo antes con un texto visible junto al formulario.
Ejemplo práctico
Pasa a menudo en formularios cortos de consulta: localizador de reserva, estado de un expediente o seguimiento de un pedido. Para «ahorrar un clic», el formulario se envía solo cuando el foco sale del último campo.
Así no: Envío automático al salir del último campo
El formulario no tiene botón. Al salir de «Primer apellido» se envía y la página cambia sin aviso. Da igual cómo se salga: con Tab, con Mayús+Tab o con un clic fuera. Quien vuelve atrás para revisar el localizador o leer la ayuda lo envía sin querer.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<form id="f" action="#">
<label for="loc">Localizador</label>
<input id="loc" name="loc" type="text">
<label for="ape">Primer apellido</label>
<input id="ape" name="ape" type="text" autocomplete="family-name">
<p>El localizador figura en el correo de confirmación.</p>
</form>
<p id="res" tabindex="-1" hidden>Reserva encontrada: hotel en Cartagena, 2 noches.</p>
<script>
const f = document.getElementById('f');
const res = document.getElementById('res');
f.ape.addEventListener('blur', () => {
if (f.loc.value && f.ape.value) {
f.hidden = true; // equivale a f.submit(): cambio de contexto
res.hidden = false;
res.focus();
}
});
</script>Así sí: Envío solo con el botón o con Intro
Se quita el envío en blur y se añade un botón de envío. Ahora el cambio solo ocurre cuando la persona lo pide: con el botón o con la tecla Intro en un campo, como en cualquier formulario.
Pruébelo aquí:
Ver el código del ejemplo correcto
<form id="f" action="#">
<label for="loc">Localizador</label>
<input id="loc" name="loc" type="text">
<label for="ape">Primer apellido</label>
<input id="ape" name="ape" type="text" autocomplete="family-name">
<p>El localizador figura en el correo de confirmación.</p>
<button type="submit">Consultar reserva</button>
</form>
<p id="res" tabindex="-1" hidden>Reserva encontrada: hotel en Cartagena, 2 noches.</p>
<script>
const f = document.getElementById('f');
const res = document.getElementById('res');
f.addEventListener('submit', (e) => {
e.preventDefault(); // solo para la demo; en real se envía al servidor
f.hidden = true;
res.hidden = false;
res.focus();
});
</script>Cómo comprobarlo
Errores frecuentes en auditorías
- Buscadores y filtros que recargan la página al salir del último campo, o al recorrer con flechas un select con onchange="this.form.submit()".
- Campos de código de verificación que se envían solos al escribir el último dígito, sin aviso previo.
- Ocultar el botón de envío por diseño y enviar con un evento blur.
- Asistentes por pasos que avanzan solos al completar el último campo del paso.
Ver el texto completo del W3C (traducción al español)
Aplicabilidad
HTML
Descripción
Con frecuencia los formularios se diseñan para que se envíen automáticamente cuando el usuario ha rellenado todos los campos o cuando el foco abandona el último campo. Este enfoque plantea dos problemas. El primero es que un usuario con discapacidad que necesite más contexto puede mover el foco fuera del campo hacia las instrucciones sobre cómo rellenar el formulario, o hacia otro texto, y enviar el formulario accidentalmente. El otro es que, con algunos elementos de formulario, el valor del campo cambia a medida que se recorren los elementos con el teclado, lo que de nuevo envía accidentalmente el formulario. Es mejor confiar en el comportamiento estándar de los formularios: el botón de envío y la tecla Intro.
Ejemplos
Este ejemplo de fallo envía un formulario cuando el usuario abandona el último campo de un formulario de número de teléfono con tres campos. El formulario se enviará si el usuario abandona el campo después de editarlo, incluso al navegar hacia atrás en el orden de tabulación. Quien desarrolla no debería usar este método para enviar un formulario; en su lugar debería usar un botón de envío o confiar en el comportamiento predeterminado del formulario, que se envía cuando el usuario pulsa Intro en un campo de texto.
<form method="get" id="form1">
<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>Este es un ejemplo que envía un formulario cuando el usuario selecciona una opción del menú sin que se avise de antemano de este comportamiento. El formulario se enviará en cuanto se seleccione un elemento del menú. Un usuario que use el teclado no podrá pasar del primer elemento del menú. Las personas ciegas y las personas con temblor en las manos pueden equivocarse fácilmente al elegir un elemento de la lista desplegable y se les lleva a un destino equivocado antes de que puedan corregirlo.
<form method="get" id="form2">
<input type="text" name="text1">
<select name="select1" onchange="form2.submit();">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</form>Pruebas
Procedimiento
- Introducir datos en todos los campos de la página, empezando por arriba.
- Introducir datos en el último campo y salir de él (con el tabulador).
- Comprobar si al abandonar el último campo se produce un cambio de contexto.
Resultados esperados
- Si la comprobación n.º 3 es verdadera, se da esta 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 F36 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.