Técnica HTML WCAG 2.2
H32Poner un botón de envío en cada formulario
Nombre oficial en el W3C: Proporcionar botones de envío
En pocas palabras
Todo formulario debe tener un botón para enviarlo, como «Buscar» o «Ver horarios». El cambio de página o de contenido solo debe ocurrir cuando la persona pulsa ese botón. No debe ocurrir al elegir una opción de un desplegable ni al marcar una casilla.
Por qué es importante
Quien usa teclado recorre las opciones de un desplegable con las flechas. Si la página cambia con la primera flecha, nunca llega a la opción que buscaba.
Un cambio inesperado también desorienta a quien usa lector de pantalla o tiene dificultades cognitivas. El botón deja claro cómo y cuándo se envía el formulario. Así cada persona decide el momento.
Cómo se hace
- Añada a cada formulario un
<button type="submit">o un<input type="submit">. Si el botón es una imagen, use<input type="image">con sualt. - Dé al botón un texto que diga lo que va a pasar: «Ver horarios», «Buscar», «Enviar solicitud».
- Lance la acción con el evento
submitdel formulario, no con elchangede un desplegable o una casilla. - No sustituya el botón por un
divo un icono cononclick.
Ejemplo práctico
Es frecuente en desplegables que llevan a otra página en cuanto se elige una opción. Por ejemplo, un selector de oficina, de provincia, de idioma o de categoría. La demo no puede cambiar de página, así que simula el cambio escribiendo el resultado.
Así no: Desplegable que cambia de página al elegir
El formulario no tiene botón de envío. El cambio de página se lanza con el evento change del desplegable. En Chrome y Edge para Windows, las opciones se recorren con las flechas sin abrir la lista. La primera pulsación ya cambia de página, y el usuario nunca llega a la oficina que buscaba.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Botón de envío que el usuario pulsa cuando decide
Se añade un <button type="submit">. El código escucha el evento submit del formulario, no el change del desplegable. El usuario recorre las opciones con calma. El cambio solo ocurre cuando pulsa «Ver horarios» o Intro.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Selectores de idioma, provincia o categoría que cambian de página con el evento
change, sin botón para confirmar. - Buscadores sin botón que solo se envían con Intro, sin ninguna indicación visible de cómo buscar.
- Botones de envío sustituidos por un
divo un icono cononclick. No reciben el foco ni envían el formulario con Intro. - Filtros de listados (casillas o botones de opción) que recargan toda la página en cada cambio y llevan el foco al principio.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H32 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H32 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.