FORMS

Use Clear Labels

A label is the words above each input field and tells the user what to enter in each field. Every single field needs one.

Good labels

• Name

• Email Address

• Phone Number

• Message

Avoid

• Blank fields

• Placeholder-only labels (“Enter name…”)

• Cute or vague labels (“How should we call you?”)

Why this matters
Screen readers rely on labels to announce what each field is. Visual users also need to see what information is needed in each field.

Don’t Rely on Placeholder Text

Placeholder text is the text inside an input field and disappears when someone starts typing. This text is often completely skipped by screen readers.

Use placeholder text only for examples, not instructions.

Example
Label: Phone Number
Placeholder: 555-123-4567

This helps users without losing important context.

Keep Instructions Simple and Visible

If a field has rules, give instructions before the user has the opportunity to make a mistake.

Examples

• Password must be at least 8 characters

• Your message must be under 500 characters

• Business name required for quote requests

Keep your instructions short and written in plain language.

Use the Right Input Type (Semantic HTML, Explained)

Semantic HTML just means using fields that match the information you’re collecting. If you are using a website builder you likely will not see orhave access to the actual code and options will very from one platform to another.

Follow these guidelines

• Use common inputs when available → Name, Email, and Phone number are almost always available to select when building a form. Do NOT choose a basic “text” field to replace available options like these.

• Checkboxes → for yes/no or multiple options

• Radio buttons → for choosing one option

• Dropdowns → for long lists or specific choices

Keep Color Contrast Strong

People must be able to read the text inside form fields and see the borders clearly.

Things to check

• Field borders

• Field labels

• Error messages

• Placeholder text

Make Error Messages Clear and Helpful

If a user makes a mistake, tell them:

1. What went wrong

2. How to fix it

Examples
✔ “Please enter a valid email address.”
✔ “This field is required.”
✔ “Message is too long. Maximum 500 characters.”

Avoid
✘ “Error.”
✘ Highlighting the field in red with no explanation.

Place the error message near the field, not just at the top of the form.

Support Keyboard Navigation

Some people cannot use a mouse. All form fields must be reachable with the Tab key. Website builders generally have this capability built in for you.

You can check that users are able to

• Tab into fields

• Move between fields

• Activate buttons

• Check checkboxes

• Submit the form

• Exit the form without submitting

This ensures your form is usable for keyboard-only and switch device users.

Use Clear, Descriptive Button Text

Good buttons tell users exactly what will happen.

Good

• Submit

• Send Message

• Request Quote

• Sign Up

Avoid

• Click Here

• Go

• OK

This supports clarity and screen reader usability.