Técnica Scripts de cliente WCAG 2.2
SCR18Validar los datos de un formulario en el navegador y explicar el error
Nombre oficial en el W3C: Proporcionar validación y alerta en el lado del cliente
En pocas palabras
Esta técnica comprueba con JavaScript los datos de un formulario antes de enviarlo. Si algo está mal, explica con texto cuál es el error y lleva el foco al campo afectado. Así la persona sabe qué corregir sin esperar a que el servidor rechace el envío.
Por qué es importante
Un error que solo se marca con un borde rojo pasa desapercibido para una persona ciega o con daltonismo. Un mensaje genérico como «Datos incorrectos» tampoco ayuda a nadie.
Si el formulario dice qué campo falla y por qué, cualquier persona puede corregirlo. Por ejemplo: «La fecha de nacimiento debe tener el formato dd/mm/aaaa».
Cómo se hace
- Compruebe cada campo al salir de él o al pulsar «Enviar».
- Si hay un error, describa en texto el problema y cómo resolverlo.
- Lo más sencillo es un
alert(). Es mejor mostrar el mensaje en la página, junto al campo, y relacionarlo conaria-describedby. - Lleve el foco al primer campo con error para que la persona pueda corregirlo enseguida.
- Si hay varios errores, muestre una lista al principio con enlaces a cada campo.
- Valide también en el servidor. La validación del navegador ayuda, pero no basta.
Cómo comprobarlo
- Rellene el formulario con datos incorrectos, por ejemplo una fecha imposible o un correo sin arroba.
- Envíelo y compruebe que aparece un mensaje que explica el error con palabras.
- Confirme que el foco queda en el campo erróneo o que el mensaje permite llegar a él.
- Con un lector de pantalla, verifique que el mensaje se lee.
Ejemplo
Comprobación de una fecha al enviar un formulario de cita previa.
form.addEventListener("submit", (e) => {
const fecha = document.getElementById("fecha");
if (!/^\d{2}\/\d{2}\/\d{4}$/.test(fecha.value)) {
e.preventDefault();
document.getElementById("error-fecha").textContent =
"Escriba la fecha con el formato dd/mm/aaaa.";
fecha.setAttribute("aria-invalid", "true");
fecha.focus();
}
});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 SCR18 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 valida la entrada del usuario.
Descripción
El objetivo de esta técnica es validar la entrada del usuario a medida que se introducen los valores en cada campo, mediante scripts en el lado del cliente. Si se encuentran errores, un cuadro de diálogo de alerta describe en texto la naturaleza del error. Una vez que el usuario cierra el cuadro de alerta, resulta útil que el script sitúe el foco del teclado en el campo donde se produjo el error.
Ejemplos
Comprobar un único control con un manejador de eventos
El siguiente script comprobará que se ha introducido una fecha válida en el control de formulario.
<label for="date">Date:</label>
<input type="text" name="date" id="date"
onchange="if(isNaN(Date.parse(this.value)))
alert('This control is not a valid date.
Please re-enter the value.');">Comprobar varios controles cuando el usuario envía el formulario
El siguiente ejemplo muestra varios controles en un formulario. El elemento form utiliza el atributo onsubmit, que crea un manejador de eventos para ejecutar el script de validación cuando el usuario intenta enviar el formulario. Si la validación tiene éxito, el evento devuelve true y el envío del formulario continúa; si la validación encuentra errores, muestra un mensaje de error y devuelve false para cancelar el intento de envío, de modo que el usuario pueda corregir los problemas.
Este ejemplo utiliza una alerta por simplicidad. Una notificación más útil para el usuario consistiría en resaltar los controles con problemas y añadir información a la página sobre la naturaleza de los errores y sobre cómo llegar a los controles cuyos datos hay que corregir.
Aunque este ejemplo utiliza un atributo onsubmit en el elemento form por brevedad, la práctica habitual es crear un escuchador del evento de envío cuando se carga la página.
Código del script:
function validate() {
// initialize error message
var msg = "";
//validate name
var pattern = /^[a-zA-Z\s]+$/;
var el = document.getElementById("name");
if (!pattern.test(el.value)) {
msg += "Name can only have letters and spaces. ";
}
// validate number
var pattern = /^[\d\-+\.\s]+$/;
var el = document.getElementById("tel");
if (!pattern.test(el.value)) {
msg += "Telephone number can only have digits and separators. ";
}
if (msg != "") {
alert(msg);
return false;
}
else {
return true;
}Código del formulario:
<form action="multiple-controls.html" onsubmit="return validate()">
<div>
<label for="name">Name:</label>
<input autocomplete="name" id="name" name="name" type="text">
</div>
<div>
<label for="tel">Telephone number:</label>
<input autocomplete="tel" id="tel" name="tel" type="tel">
</div>
<div>
<input type="submit">
</div>
</form>Puede verse en funcionamiento en el ejemplo práctico de comprobación de varios controles cuando el usuario envía el formulario.
Pruebas
Procedimiento
Para los campos de formulario que requieren una entrada específica:
- Introducir datos no válidos.
- Determinar si se proporciona una alerta que describa el error.
Resultados esperados
- La comprobación n.º 2 es verdadera.
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 SCR18 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.