Skip to content
Back to Blog
UX/UI
Updated

Accessible forms: labels, errors, and useful inquiries

Design inquiry forms that explain their fields, help people recover from errors, and confirm receipt without collecting unnecessary information.

Branded abstract 5e Labs cover image for Accessible forms: labels, errors, and useful inquiries

An accessible inquiry form needs understandable labels, clear requirements, recoverable errors, and a trustworthy confirmation. Reducing avoidable obstacles can help people complete the task, but accessibility work alone does not justify a promised conversion increase. Evaluate the form’s actual behavior before making claims about its results.

The right starting question is simple: what information does your team need to take the next useful action? Everything else has to earn its place.

Give each field a reason and a persistent label

Keep a field required only if its absence prevents the next action. A phone number may be essential for a callback request but unnecessary for a request answered by email. Explain unusual requirements where the person encounters them.

Use visible labels that remain after typing. Associate them with their controls; W3C’s form-label guidance explains the label and input relationship. Placeholder examples can supplement a label, but should not carry the entire instruction.

For a bilingual form, translate the helper text and error messages as well as the field names. Do not impose a US-only phone pattern on buyers in Costa Rica. Accept reasonable input variations and normalize them where the receiving system requires it.

Design the correction path before the success state

A red border alone does not explain what went wrong. Name the field, describe the problem, and tell the person how to fix it. Preserve valid entries when validation fails.

For longer forms, an error summary can link to affected fields. W3C’s notification tutorial describes this approach and the association of field errors through aria-describedby. Dynamic messages also need an appropriate announcement strategy, tested with assistive technology.

Distinguish invalid input from a delivery failure. “Check your email address” is wrong if the network failed after the address passed validation. That mistake makes people edit correct information and submit again without knowing whether anything was received.

Walk through a hypothetical inquiry

In this hypothetical form review, a Costa Rican maintenance supplier receives inquiries in English and Spanish.

The form asks for contact email, equipment type, and a description. A photo is optional. The visitor omits the equipment type and tries to send. The form keeps the description, displays a specific error, and lets the visitor reach the missing field by keyboard.

After correction, the server accepts the request and creates a reference. Only then does the interface confirm receipt. If delivery fails, it explains that failure and offers a retry without erasing the text. The confirmation promises a response window only if the operations team has approved one.

The example separates four things often collapsed into one button: validation, sending, acceptance, and human follow-up.

Use a small acceptance checklist

Test the complete journey, not just empty-field validation:

  • Complete and correct the form using only a keyboard.
  • Check that every input has an understandable accessible name.
  • Submit an invalid value and verify a useful correction message.
  • Simulate a failed request and confirm that entered text remains.
  • Verify that success corresponds to server acceptance, not a button click.
  • Repeat the checks in the other language and on a narrow screen.

Take your current form and annotate why each required field is necessary. Then review its failure states with 5e Labs UX/UI design before changing the visual styling or adding more qualification questions.

Have a project in mind?

Get in Touch