Web Accessibility Academy · Lección

En línea, al perder el foco o al enviar: el momento importa

Valide en momentos que no resulten abrumadores.

Lección 4 de 413 pasos

En línea, al perder el foco o al enviar: el momento importa es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.

Cuándo validar es importante

El mismo mensaje de error puede ayudar o molestar según cuándo aparezca. El momento de mostrarlo es también una decisión de accesibilidad. ⏱️

Al enviar es el punto de partida

Comprobar todo al enviar es predecible y nunca interrumpe al usuario. Es la opción predeterminada más segura para casi cualquier formulario.

Por qué la validación en línea puede perjudicar

Validar con cada pulsación de tecla marca un campo como incorrecto antes de que el usuario termine de escribir. Esa insistencia en línea frustra a todo el mundo.

Al perder el foco es el punto ideal

Comprobar el campo cuando el usuario lo abandona, es decir, en blur, le permite terminar de escribir y después le ofrece información en una pausa natural.

input.addEventListener("blur", validateField);

No anunciar demasiado pronto

Un error que aparece mientras se escribe puede apoderarse del lector de pantalla. Espere a un momento real, como blur o el envío, antes de anunciarlo.

Confirmar y volver a comprobar en línea

Una vez que un campo ha fallado y el usuario lo está corrigiendo, volver a validarlo mientras escribe resulta útil. Confirma que el error está desapareciendo.

Dar tiempo para terminar

WCAG pide que no apresure a los usuarios. Evite los tiempos de espera que borren lo escrito y permita que cada persona complete el campo a su propio ritmo.

Indicar lo obligatorio desde el principio

Marque de antemano los campos obligatorios con required y una nota visible, para que los usuarios conozcan la regla antes de enviar el formulario, no después.

<input required aria-required="true">

Mantener los mensajes específicos

Independientemente del momento, explique qué está mal y cómo corregirlo. Un mensaje claro es mejor que uno impreciso, aunque aparezca en el momento perfecto.

Apoyarse en el navegador

La validación nativa de HTML se ejecuta al enviar de forma predeterminada. Los atributos integrados, como type y required, le proporcionan un momento adecuado sin esfuerzo adicional.

<input type="email" required>

Ser coherente

Elija una estrategia temporal y aplíquela en todo el formulario. Un comportamiento predecible permite a los usuarios aprender el patrón y confiar en él.

Comprobación rápida

¿Qué momento de validación es la opción predeterminada más accesible?

Resumen

Valide al producirse blur o al enviar, no con cada pulsación; vuelva a comprobar en línea mientras se corrige el campo, indique las reglas desde el principio y sea coherente. ✅

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
30
Lecciones
120

Preguntas frecuentes

¿La lección «En línea, al perder el foco o al enviar: el momento importa» es gratis?

Sí — el texto completo de «En línea, al perder el foco o al enviar: el momento importa» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.

¿Qué aprenderé en «En línea, al perder el foco o al enviar: el momento importa»?

Valide en momentos que no resulten abrumadores. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Web Accessibility Academy?

No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «En línea, al perder el foco o al enviar: el momento importa»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?

Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Asociar errores a campos con aria-describedby
  2. Marcar el estado no válido con aria-invalid
  3. Mover el foco al primer error
  4. En línea, al perder el foco o al enviar: el momento importa
← Volver a Web Accessibility Academy