Técnica Técnicas generales WCAG 2.2
G139Mostrar una lista de errores con enlaces a cada campo
Nombre oficial en el W3C: Crear un mecanismo que permita a los usuarios saltar a los errores
En pocas palabras
Cuando un formulario tiene errores, se muestra al principio un resumen en texto. El resumen explica qué ha fallado en cada campo. Cada error es un enlace que lleva directamente al campo que hay que corregir. Así nadie tiene que buscar el fallo por todo el formulario.
Por qué es importante
En un formulario largo, como una solicitud de cita previa o una inscripción, encontrar el campo con el error cuesta. A una persona que usa lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) o que solo usa el teclado le cuesta todavía más.
Un resumen con enlaces le dice qué falla y le lleva al sitio exacto con un solo paso. También ayuda a personas con dificultades de atención o de memoria.
Cómo se hace
- Al enviar el formulario, compruebe los datos, en el servidor, con JavaScript o con ambos.
- Si hay errores, vuelva a mostrar el formulario sin borrar lo que la persona ya escribió.
- Ponga arriba un aviso en texto, por ejemplo «Hay 2 errores en el formulario», seguido de la lista de errores.
- Describa cada error con claridad e indique cómo corregirlo: «Teléfono: escriba 9 cifras, sin espacios».
- Convierta cada error en un enlace al campo, usando su
id. Lleve el foco del teclado al resumen para que se lea enseguida. - Puede añadir junto a cada campo un enlace para volver al resumen.
Cómo comprobarlo
- Rellene el formulario dejando vacío un campo obligatorio y con un dato incorrecto en otro.
- Envíelo y compruebe que aparece un mensaje en texto que nombra los dos campos.
- Pulse cada enlace de la lista: el foco debe ir al campo correspondiente.
- Compruebe que los datos ya escritos siguen en el formulario.
- Con un lector de pantalla, confirme que el resumen se anuncia al aparecer.
Ejemplo
Resumen de errores al principio del formulario, con un enlace a cada campo.
<div id="resumen-errores" tabindex="-1">
<p>Hay 2 errores en el formulario:</p>
<ul>
<li><a href="#email">Correo electrónico: este campo es obligatorio.</a></li>
<li><a href="#telefono">Teléfono: escriba 9 cifras, sin espacios.</a></li>
</ul>
</div>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 G139 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 acepta la entrada de datos del usuario, con restricciones en el formato, el valor o el tipo de la entrada.
Descripción
El objetivo de esta técnica es ayudar a los usuarios a encontrar los errores de entrada cuando la información que han proporcionado no se acepta. Esto incluye los campos en los que falta información obligatoria y los campos con información incorrecta. Cuando los usuarios introducen datos que se comprueban y se detectan errores de entrada, se proporciona un enlace a ese error para que el usuario no tenga que buscarlo. Una posibilidad es utilizar validación en el servidor, volver a mostrar el formulario (incluidos los datos introducidos previamente) y añadir al principio de la página una descripción textual que indique que se ha producido un error de entrada, describa la naturaleza del problema y proporcione un enlace a los campos con problemas.
Ejemplos
Comprobación de errores en el servidor
El usuario introduce datos no válidos en un campo de formulario y envía el formulario. El servidor devuelve el formulario, con los datos del usuario todavía presentes, e indica claramente mediante texto al principio de la página que no se han aceptado. El texto describe la naturaleza de los errores y proporciona un enlace al campo que tenía el problema, para que el usuario pueda llegar fácilmente hasta él y corregirlo.
Comprobación de errores en el cliente con ventana emergente
El usuario introduce datos no válidos en un campo de formulario e intenta enviar el formulario. Un script en el cliente detecta el error, cancela el envío y modifica el documento para ofrecer un mensaje de texto que describe el error, con enlaces a los campos erróneos. El script también modifica las etiquetas de los campos con problemas para resaltarlos.
Comprobación de errores en el cliente sin ventana emergente
Cuando el usuario envía un formulario, en lugar de llevarlo a una página nueva, un script coloca automáticamente el foco en un enlace de texto que dice «Errors have occurred» (Se han producido errores). El enlace lleva al primer elemento de una lista ordenada de mensajes de error descriptivos. Cada elemento de la lista es un enlace al control en el que se produjo el error. Y hay un enlace desde el error de vuelta a la lista ordenada de mensajes de error descriptivos. El proceso se repite tantas veces como sea necesario.
Pruebas
Procedimiento
- Rellenar un formulario dejando deliberadamente en blanco un campo obligatorio, cometer un error de entrada en otro campo y enviar el formulario.
- Comprobar que se proporciona un mensaje de texto que identifica el campo en el que faltan los datos obligatorios.
- Comprobar que se proporciona un mensaje de texto que identifica el campo con el error de entrada.
- Comprobar que hay un enlace desde el mensaje de datos faltantes a cada campo en el que faltan datos obligatorios
- Comprobar que hay un enlace desde el mensaje de error a la lista de errores.
El criterio de conformidad 3.3.2 Etiquetas o instrucciones exige que, si se detecta un error de entrada y se conocen sugerencias para corregirlo que pueden ofrecerse sin poner en peligro la seguridad o el propósito del contenido, dichas sugerencias se proporcionen al usuario.
Resultados esperados
- Si la comprobación n.º 2 es verdadera, la comprobación n.º 4 es verdadera.
- Si la comprobación n.º 3 es verdadera, la comprobación n.º 5 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 G139 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.