Validación y errores accesibles

Estrategias avanzadas para validar formularios y comunicar errores sin bloquear ni confundir.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Diseño de validación que comunica con precisión.

Validación progresiva

Combina validación en tiempo real y al envío según el tipo de campo.

Error específico

Describe causa y acción correctiva; evita mensajes genéricos.

aria-invalid + mensaje

El control y su texto de error deben reflejar el mismo estado.

Resumen de errores

En formularios largos, ofrece listado de incidencias con enlaces a campos.

Persistencia de datos

No borres campos válidos tras error parcial.

Error típico

Mostrar error visual sin anuncio para lector ni movimiento de foco útil.

Aplicación en proyectos reales

Cómo endurecer validación en flujos de alta conversión.

Empieza por formularios de registro, checkout y recuperación de cuenta.

Diseña mensajes que cubran errores de formato, negocio y disponibilidad asíncrona.

Mide abandono por campo para mejorar reglas y copy en siguientes iteraciones.

Implementa contrato común de error entre frontend y backend.
Evita mostrar múltiples mensajes contradictorios en el mismo campo.
Asegura navegación por teclado hacia el primer error al enviar.
Guarda trazas de errores recurrentes para priorizar mejoras.

Patrón de código

Base de validación con estado semántico y mensaje anunciado.

Validación de correo accesible

if (!email.value.includes('@')) {
  email.setAttribute('aria-invalid', 'true');
  error.textContent = 'Introduce un correo válido.';
} else {
  email.removeAttribute('aria-invalid');
  error.textContent = '';
}

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

Ejemplo Demo guiada Valida un campo y anuncia error con foco en el input afectado.

⌄

🏁 Retos

Reto Reto práctico Añade resumen de error y estado inválido a un formulario mínimo.

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 16

Combobox y autocomplete accesible

Lección 18

Zoom, reflow y accesibilidad móvil

›