Técnica HTML WCAG 2.2
H32Proporcionar botones de envío
En resumen
Esta técnica pide que todo formulario tenga un botón de envío explícito (input type="submit", input type="image" o button type="submit"), de modo que el usuario decida cuándo se envían los datos y se produce el cambio de contexto, en lugar de que ocurra automáticamente al cambiar un campo. Beneficia a quienes usan teclado, lector de pantalla o tienen dificultades cognitivas, y evita envíos inesperados.
Ejemplo práctico
Es frecuente en desplegables que llevan a otra página en cuanto se elige una opción: selector de oficina, de provincia, de idioma o de categoría en una tienda. El ejemplo simula el cambio de página escribiendo el resultado, porque la demo no puede navegar.
Así no: Desplegable que cambia de página al elegir
El formulario no tiene botón de envío y el cambio de página se dispara con el evento change. En Chrome y Edge para Windows, al recorrer las opciones con las flechas sin desplegar la lista, la primera pulsación ya provoca el cambio y el usuario nunca llega a la oficina que buscaba.
<form action="#" id="f">
<label for="oficina">Oficina de atención ciudadana</label>
<select id="oficina" name="oficina">
<option value="">Seleccione una oficina</option>
<option>Centro</option>
<option>El Carmen</option>
<option>Puerto</option>
</select>
</form>
<p id="resultado" role="status"></p>
<script>
var f = document.getElementById('f');
document.getElementById('oficina').addEventListener('change', function () {
if (!this.value) return;
f.hidden = true;
document.getElementById('resultado').textContent =
'Nueva página: horarios de la oficina ' + this.value + '.';
});
</script>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Botón de envío que el usuario activa cuando decide
Se añade un <button type="submit"> y el código escucha el evento submit del formulario en lugar del change del desplegable. El usuario puede recorrer las opciones con calma y el cambio de contexto solo ocurre cuando pulsa «Ver horarios» (o Intro).
<form action="#" id="f">
<label for="oficina">Oficina de atención ciudadana</label>
<select id="oficina" name="oficina">
<option value="">Seleccione una oficina</option>
<option>Centro</option>
<option>El Carmen</option>
<option>Puerto</option>
</select>
<button type="submit">Ver horarios</button>
</form>
<p id="resultado" role="status"></p>
<script>
var f = document.getElementById('f');
f.addEventListener('submit', function (e) {
e.preventDefault();
var oficina = document.getElementById('oficina').value;
if (!oficina) {
document.getElementById('resultado').textContent = 'Seleccione una oficina antes de continuar.';
return;
}
f.hidden = true;
document.getElementById('resultado').textContent =
'Nueva página: horarios de la oficina ' + oficina + '.';
});
</script>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Selectores de idioma, provincia o categoría que navegan en el evento
changesin botón para confirmar. - Buscadores sin botón que solo se envían pulsando Intro, sin ninguna indicación visible de cómo lanzar la búsqueda.
- Botones de envío sustituidos por un
divo un icono cononclick, que no recibe el foco ni envía el formulario con Intro. - Filtros de listados (checkbox, radio) que recargan la página completa en cada cambio y devuelven el foco al principio.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Contenido que incluye controles de formulario.
Descripción
El objetivo de esta técnica es proporcionar un mecanismo que permita a los usuarios solicitar de forma explícita los cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envíe los datos introducidos en un formulario, por lo que es un control apropiado para provocar un cambio de contexto.
Ejemplos
Ejemplo básico de un formulario con un botón de envío
<form action="/subscribe" method="post">
<p>Enter your email address to subscribe to our mailing list.</p>
<label for="address">Your email address:</label>
<input autocomplete="email" id="address" name="address" type="text">
<input type="submit" value="Subscribe">
</form>Pruebas
Procedimiento
- Localizar todos los formularios del contenido.
- Para cada formulario, comprobar que tiene un botón de envío (
<input type="submit">,<input type="image">o<button type="submit">).
Resultados esperados
- La comprobación n.º 2 es verdadera
Recursos
-
HTML - Submit button state (
type=submit) (estado de botón de envío). -
HTML - the
buttonelement (el elemento button).
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. 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 H32 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.
