Fallo común Fallos comunes WCAG 2.2
F36Fallo 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 resumen
Este fallo se produce cuando un formulario se envía solo al rellenar o abandonar el último campo, sin que la persona pulse un botón de envío ni se le haya avisado. Quien navega con teclado o necesita releer las instrucciones puede enviar el formulario sin querer y acabar en una página inesperada. Deje que el envío dependa del botón de envío o de la tecla Intro, como es habitual.
Ejemplo práctico
Es habitual en formularios cortos de consulta (localizador de reserva, estado de un expediente, seguimiento de un pedido) que, para «ahorrar un clic», el formulario se envíe solo en cuanto 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» (con Tab, con Mayús+Tab o haciendo clic fuera) se envía y la página cambia sin aviso. Quien quiera volver atrás para revisar el localizador o leer la ayuda que hay debajo provoca el envío sin quererlo.
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Envío solo con el botón o con Intro
Se elimina el envío en blur y se añade un botón de envío: el cambio de contexto solo ocurre cuando la persona lo pide con el botón o pulsando Intro en un campo, que es el comportamiento estándar de los formularios.
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Buscadores y filtros que recargan la página al salir del último campo o al pasar con flechas por un select (onchange="this.form.submit()").
- Formularios de código de verificación que se envían solos al escribir el último dígito sin avisarlo antes.
- Ocultar el botón de envío por diseño y confiar en un evento blur para enviar.
- Pasos de un asistente que avanzan automáticamente al completar el último campo del paso.
Técnica completa: traducción al español del texto del W3C
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 fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F36 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
