Construye un formulario accesible

Un formulario accesible conserva el significado y el orden del teclado desde la primera pregunta hasta la validación y la confirmación. Revisa el formulario público, no solo el lienzo del creador.

Haz que cada control sea comprensible

• Asigna a cada entrada visible una Label concisa.
• Usa Placeholder solo como ejemplo, nunca como la única etiqueta.
• Coloca el Help Text en Below Label o Under Field cuando explique formato, propósito o límites.
• Usa campos Heading para dividir formularios largos en secciones significativas.
• Mantén las etiquetas de las opciones distintas y legibles.
• Indica los tipos y tamaños de carga aceptados antes de la selección.

No marques información opcional como obligatoria solo para que el formulario parezca completo.

Conserva una secuencia lógica

El orden de lectura sigue los pasos, las filas, las columnas y los campos. Organiza la estructura del creador en el mismo orden en que los visitantes deberían encontrarla.

Para filas de varias columnas:

1. Ajusta Mobile width a una columna completa cuando los controles queden apretados.
2. Confirma que el orden visual coincida con el orden del teclado.
3. Evita colocar instrucciones después del campo que describen.
4. Prueba con un zoom del navegador al 200%.

En un formulario de varios pasos, usa etiquetas de paso cortas y etiquetas claras para los botones Previous, Next y el botón de envío final. Los indicadores de progreso complementan los encabezados; no los sustituyen.

Haz que los errores sean recuperables

• Escribe mensajes de validación orientados a la corrección.
• Mantén los errores asociados al campo afectado.
• No comuniques un error ni un estado obligatorio solo mediante el color.
• Asegúrate de que un campo condicional oculto no pueda exigir corrección.
• Confirma que el foco se mueva de forma predecible después de la validación y de los cambios de paso.
• Mantén el resultado de éxito disponible el tiempo suficiente para leerlo antes de redirigir.

Prueba con teclado y salida asistiva

En la página publicada:

1. Navega por cada control usando solo el teclado.
2. Activa los campos de elección, los controles de carga, Previous, Next y Submit.
3. Envía datos no válidos y localiza cada error.
4. Corrige los errores sin perder las respuestas anteriores.
5. Activa cada rama condicional.
6. Completa el formulario con un ancho móvil reducido y un zoom alto.
7. Comprueba que las etiquetas, el estado obligatorio, la ayuda, el progreso y el éxito se anuncien de forma significativa mediante un lector de pantalla.

Si el CSS personalizado modifica los contornos de foco, el contraste o el orden de los campos, corrige la presentación en lugar de añadir texto de solución provisional. Consulta Fields, layout, and conditional logic y Multi-step behavior.