Accesibilidad · AA
Patrones mínimos para que cualquier formulario sea usable con teclado, lector de pantalla y validación clara: labels correctos, mensajes de error, agrupaciones y estados visuales coherentes.
La idea es que puedas copiar esta estructura en tus formularios: label siempre visible, ayuda opcional, mensaje de error claro y foco consistente. Sin buscar normas en mil sitios.
Un formulario accesible no es solo “poner campos”: necesita etiquetas claras, mensajes de ayuda y error asociados y un recorrido lógico con teclado.
aria-describedby.Texto, email, contraseña y mensaje con sus elementos esenciales: label, ayuda y foco visible.
Este campo es obligatorio.
Usaremos tu email solo para responder a tu consulta.
Debe tener al menos 8 caracteres.
Default, error y éxito, con mensajes claros y sin depender solo del color.
Estado por defecto, sin errores ni validaciones.
Revisa este dato: el formato no parece correcto.
Este campo cumple las condiciones mínimas.
Select, checkboxes y radios con estructura accesible usando fieldset y legend.
Esto nos ayuda a dirigir mejor tu mensaje.
Antes de publicar un formulario en producción, repasa al menos estos puntos.
¿Todos los campos tienen label visible (no solo placeholder)?
¿Los mensajes de error están debajo del campo y explican qué ha pasado y cómo corregirlo?
¿Puedes rellenar y enviar el formulario solo con teclado, usando Tab, Shift+Tab, Espacio y Enter?
¿Los estados (error, éxito, deshabilitado) usan color + texto y no solo color para comunicar?
¿Los textos de ayuda y error están enlazados con aria-describedby en los campos que lo necesitan?
¿El contraste de texto, bordes y mensajes cumple como mínimo AA sobre el fondo donde se usan?
¿Estás pidiendo solo la información necesaria o hay campos que podrían ser opcionales o desaparecer?