Build an accessible form

An accessible form preserves meaning and keyboard order from the first question through validation and confirmation. Review the public form, not only the builder canvas.

Make every control understandable

• Give every visible input a concise Label.
• Use Placeholder only as an example, never as the only label.
• Place Help Text Below Label or Under Field where it explains format, purpose, or limits.
• Use Heading fields to divide long forms into meaningful sections.
• Keep option labels distinct and readable.
• State accepted upload types and sizes before selection.

Do not mark optional information required merely to make the form look complete.

Preserve a logical sequence

The reading order follows steps, rows, columns, and fields. Arrange the builder structure in the same order visitors should encounter it.

For multi-column rows:

1. Set Mobile width to a full column when controls become cramped.
2. Confirm visual order matches keyboard order.
3. Avoid placing instructions after the field they describe.
4. Test at 200% browser zoom.

In a multi-step form, use short step labels and clear Previous, Next, and final-submit button labels. Progress indicators supplement headings; they do not replace them.

Make errors recoverable

• Write correction-oriented validation messages.
• Keep errors associated with the affected field.
• Do not communicate an error or required state by color alone.
• Ensure a hidden conditional field cannot demand correction.
• Confirm focus moves predictably after validation and step changes.
• Keep the success result available long enough to read before redirecting.

Test with keyboard and assistive output

On the published page:

1. Navigate every control using only the keyboard.
2. Activate choice fields, upload controls, Previous, Next, and Submit.
3. Submit invalid data and locate each error.
4. Correct the errors without losing prior answers.
5. Trigger every conditional branch.
6. Complete the form at narrow mobile width and high zoom.
7. Verify labels, required state, help, progress, and success are announced meaningfully by a screen reader.

If custom CSS changes focus outlines, contrast, or field order, correct the presentation rather than adding workaround text. Review Fields, layout, and conditional logic and Multi-step behavior.