Marcar el estado no válido con aria-invalid
Indique a la tecnología de asistencia qué campos han fallado.
Marcar el estado no válido con aria-invalid es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 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.
El rojo no basta
Un borde rojo indica a los usuarios que ven la pantalla que un campo ha fallado. Un usuario de lector de pantalla no percibe el color, así que necesita que el fallo se indique en el código. 🚫
La marca de invalidez
El atributo aria-invalid marca un control como no válido. Establézcalo en true y la tecnología de asistencia anunciará el estado de error.
<input aria-invalid="true">El valor predeterminado es false
Un campo sin aria-invalid se considera válido. Solo debe añadir aria-invalid="true" cuando una comprobación haya fallado realmente.
Vuelva a cambiarlo
Cuando el usuario corrija el valor, establezca aria-invalid en false o elimínelo. Dejarlo en true anunciaría un error que ya no existe.
<input aria-invalid="false">Cuándo aplicar la marca
Aplique aria-invalid cuando realmente valide, no al cargar la página. Marcar como no válidos los campos vacíos antes de que el usuario escriba resulta hostil.
Combínelo con un mensaje
aria-invalid indica que algo no está bien, pero no qué. Combínelo siempre con aria-describedby para que el usuario también escuche el motivo.
Se anuncia al recibir el foco
Cuando el foco entra en un campo no válido, los lectores de pantalla dicen invalid junto con el nombre. El usuario sabe al instante que debe corregirlo.
Estilice el estado
Puede seleccionar el atributo en CSS para mostrar un anillo rojo. Así, sus elementos visuales y su semántica permanecen perfectamente sincronizados.
input[aria-invalid="true"] {
border-color: crimson;
}Más que true o false
aria-invalid también acepta valores como grammar o spelling. Para la mayoría de los formularios, true sin más es exactamente lo que necesita.
No lo simule con color
Nunca dependa únicamente de una clase roja para indicar un error. La clase es invisible para la tecnología de asistencia; aria-invalid es lo que transmite el significado.
Un campo cada vez
Marque cada control que falle por separado. Establecer aria-invalid en un contenedor o en el formulario no indica a los usuarios qué input requiere atención.
Comprobación rápida
¿Qué comunica realmente aria-invalid="true"?
Resumen
Use aria-invalid para marcar los campos que fallan, establézcalo en true cuando haya un error y en false al corregirlo, y combínelo con un mensaje de error descrito. ✅
Preguntas frecuentes
¿La lección «Marcar el estado no válido con aria-invalid» es gratis?
Sí — el texto completo de «Marcar el estado no válido con aria-invalid» 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 «Marcar el estado no válido con aria-invalid»?
Indique a la tecnología de asistencia qué campos han fallado. 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 2 de 4.
¿Cuánto tiempo toma la lección «Marcar el estado no válido con aria-invalid»?
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
- Asociar errores a campos con aria-describedby
- Marcar el estado no válido con aria-invalid
- Mover el foco al primer error
- En línea, al perder el foco o al enviar: el momento importa