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 [email protected]</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.