Lección 9 de 12 · Lectura y práctica
Formularios accesibles y mensajes de error
Formularios accesibles y mensajes de error Respuesta rápida: un formulario accesible tiene labels claros, orden de foco lógico, mensajes de error específicos, ayuda contextual y controles que pueden usarse con teclado, lector de.
Del concepto a la práctica
Taller de esta lección
Ejemplo resuelto
Una reserva necesita correo y fecha. Con «ana@» y una fecha vacía, el formulario muestra «Hay errores» y borra ambos campos. Una mejora conserva los valores, identifica cada problema y explica la corrección: «Escribe un correo con dominio, como nombre@ejemplo.com» y «Selecciona una fecha». El resumen permite localizar los campos afectados; la ayuda junto al campo da contexto sin exigir memorizar todos los errores.
Pruébalo
Envía el formulario con un valor válido y otro inválido.
Comprueba que cada campo tenga una etiqueta asociada y ayuda pertinente.
Escribe mensajes específicos y vincúlalos con el campo correspondiente.
Corrige un error y repite el envío sin perder el dato válido.
El error frecuente es comunicar únicamente con borde rojo o mover el foco sin explicar el motivo. La ubicación del mensaje y la secuencia de interacción también importan.
Comprueba tu resultado
Entrega dos casos: campos vacíos y correo incompleto. En ambos, la persona debe identificar qué corregir, encontrar el campo con teclado y conservar los datos que ya eran válidos.
Mapa de prácticaEl texto alternativo comunica el propósito de una imagen. La navegación por teclado necesita un foco visible; los campos necesitan etiquetas y la página una estructura semántica. Estas comprobaciones ayudan a detectar barreras y no sustituyen una auditoría completa.
Ver la infografía en tamaño completo ↗Formularios accesibles y mensajes de error
Los formularios suelen concentrar conversiones: registro, newsletter, checkout, contacto, postulación y creación de curso. Si fallan en accesibilidad, también fallan en negocio. En POUR combinan los principios Operable, Comprensible y Robusto.
Patrón base de formulario accesible
- Label visible: cada input necesita una etiqueta clara; placeholder no reemplaza label.
- Ayuda cercana: explicá formato, límites o ejemplos antes de que el usuario falle.
- Error específico: no escribas "campo inválido"; indicá qué cambiar.
- Relación programática: conectá label, descripción y error con el control cuando corresponda.
- Foco útil: al enviar con errores, llevá al usuario al primer problema o resumí errores arriba.
Ejemplo de error comprensible
<label for="email">Email</label>
<input id="email" name="email" type="email" aria-describedby="email-error" aria-invalid="true" />
<p id="email-error">Ingresá un email con formato nombre@dominio.com</p>Este patrón es mejor que pintar el borde rojo sin texto. El usuario entiende el problema y una tecnología de asistencia puede anunciar el estado.
Ejercicio: mejorar un formulario real
Tomá un formulario de newsletter, login o checkout y documentá mejoras: labels, errores, foco, teclado, contraste y lectura con zoom. Entregable: captura antes/después y checklist de criterios corregidos.
De formulario accesible a conversión
La accesibilidad no es solo cumplimiento: reduce abandono. Un formulario claro ayuda a usuarios con discapacidad, usuarios apurados, pantallas chicas, mala conexión y errores de tipeo. Sumá esta evidencia a tu portfolio frontend, UX/UI o QA.
Sigue con Accesibilidad Web (WCAG)
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.