How to Make Your Website Forms Accessible: A Non-Technical Guide

Forms are the gateway to your business. Contact forms, checkout processes, email signups, appointment bookings, search bars — these are the moments where a visitor becomes a customer, a lead, or a subscriber. And they are also where accessibility most commonly breaks down.

When a form is not accessible, people who use screen readers, keyboard navigation, or voice control cannot complete it. That means lost sales, lost leads, and a website that excludes a significant portion of your potential audience.

The good news is that most form accessibility issues are fixable without a developer, especially if you use common website platforms and form builders. This guide explains what goes wrong, how to check your forms, and how to fix the problems on popular platforms.

Why Forms Are the Biggest Accessibility Problem

Studies consistently show that forms are the number one source of accessibility failures on websites. There are several reasons for this.

Forms Require Interaction

Static content like paragraphs and images is relatively simple for assistive technology to handle. Forms are different — they require the user to type, select, check boxes, and submit. Each of those interactions needs to work correctly with screen readers, keyboards, and voice control software.

Multiple Things Can Go Wrong

A single form has many components that each need to be accessible: labels, input fields, dropdown menus, checkboxes, radio buttons, error messages, help text, and the submit button. If any one of these elements is broken, the entire form can become unusable.

Modern web design trends often prioritize visual minimalism over usability. Placeholder text used as labels, floating label animations, custom-styled dropdowns, and icon-only buttons may look sleek but frequently create accessibility barriers.

The Five Most Common Form Accessibility Problems

Before you can fix your forms, you need to understand what typically goes wrong.

Problem 1: Missing or Hidden Labels

Every form field needs a label — a text element that tells the user what information to enter. The label “Email address” above or beside an email input field is an example.

The most common mistake is using placeholder text (the gray text inside a field) as the only label. This fails for three reasons:

  • Placeholder text disappears when someone starts typing, so users can forget what the field was asking for.
  • Many screen readers do not reliably read placeholder text as a label.
  • Placeholder text typically has low contrast, making it hard to read for people with low vision.

A proper label is a separate text element that stays visible at all times and is programmatically connected to its input field so screen readers can announce it.

Problem 2: No Error Messages (or Unhelpful Ones)

When someone fills out a form incorrectly, they need to know what went wrong and how to fix it. Common failures include:

  • The form simply does not submit with no indication of what is wrong.
  • A generic message like “Please fix the errors below” appears, but the specific fields with problems are not identified.
  • Error messages appear only as a color change (like a red border) with no text explanation — invisible to screen reader users and unhelpful for color-blind users.
  • Error messages appear far from the field they relate to, so the connection is unclear.

Good error messages appear next to the specific field, explain the problem in plain language, and are announced to screen readers automatically.

Problem 3: Fields That Cannot Be Reached by Keyboard

Some users navigate entirely with the Tab key (moving forward through fields) and Shift+Tab (moving backward). If your form has custom dropdown menus, date pickers, or interactive elements that were built with JavaScript, they may not be reachable or operable with a keyboard.

If you cannot tab to a field or cannot make a selection using only your keyboard, that field is broken for keyboard users.

When a form has related options — like a set of radio buttons for selecting a shipping method — those options need to be grouped together with a descriptive label for the group. Without proper grouping, a screen reader user might hear “Standard” without knowing it is a shipping speed option, or “Yes” without knowing what question it answers.

Problem 5: Time Limits and CAPTCHAs

Some forms include time limits that automatically clear the form or end a session. For people who take longer to navigate (screen reader users, people with motor disabilities, people with cognitive disabilities), this can make the form impossible to complete.

CAPTCHAs — those “prove you are not a robot” challenges — are another major barrier. Image-based CAPTCHAs are impossible for blind users. Even audio alternatives are often difficult to understand. Google’s reCAPTCHA v3 (the invisible one) is the most accessible option, but it is not perfect.

How to Check Your Forms Right Now

You can test your forms in about five minutes without any special tools.

Test 1: The Keyboard Test

  1. Open your form page in a browser.
  2. Click just above the form, then press the Tab key repeatedly.
  3. Can you reach every single field, dropdown, checkbox, and the submit button using only Tab?
  4. Can you tell which field is currently selected? There should be a visible outline or highlight.
  5. Can you operate dropdowns and select options using arrow keys?
  6. Can you check and uncheck checkboxes using the Space bar?
  7. Can you submit the form by pressing Enter?

If the answer to any of these is “no,” you have a keyboard accessibility problem.

Test 2: The Label Test

  1. Click on the text label next to a form field (not the field itself, but the label text).
  2. Does clicking the label move your cursor into the associated field?
  3. If yes, the label is properly connected. If no, the label may be missing its programmatic association.
  4. Repeat for every field.

Test 3: The Error Test

  1. Submit your form with empty required fields or intentionally incorrect data.
  2. Do clear, specific error messages appear?
  3. Are the error messages near the fields they relate to?
  4. Do the error messages explain what needs to be fixed (not just “this field is required” but “Please enter a valid email address”)?

Test 4: The Zoom Test

  1. Press Ctrl+Plus (Cmd+Plus on Mac) to zoom your page to 200%.
  2. Does the form still work? Are all fields and labels visible? Does nothing overlap or get cut off?
  3. This matters for people with low vision who zoom in to read.

Here are specific fixes for the most common website platforms and form builders.

WordPress

WordPress itself does not have a built-in form system, so accessibility depends on your form plugin.

WPForms: This is one of the more accessible form plugins. Labels are added by default. To check your settings, open any form in the WPForms editor, click on a field, and make sure “Label” is filled in and not hidden. Under Settings > General, make sure you have not disabled labels for visual reasons.

Gravity Forms: Also generally accessible. Each field has a label by default. Make sure you have not checked “Hide Label” in individual field settings unless you have a good reason. Gravity Forms also supports ARIA descriptions for help text.

Contact Form 7: This plugin requires more manual attention. When building your form, make sure every input is wrapped in a label tag. The plugin documentation has specific examples for accessible markup. If you are not comfortable with this, WPForms or Gravity Forms are easier options.

General WordPress form tips:

  • Never hide labels purely for design reasons.
  • If your form has required fields, mark them clearly (not just with a color change).
  • Make sure your form’s submit button has descriptive text like “Send Message” or “Complete Purchase” rather than just “Submit.”

Shopify

Shopify’s built-in forms (contact form, customer login, checkout) are generally accessible in modern themes. However, there are things to watch for:

  • Checkout forms: Shopify controls the checkout process. Recent Shopify updates have improved checkout accessibility, but third-party checkout customizations can break things. If you use checkout customization apps, test them with the keyboard test described above.
  • Contact forms: The default Shopify contact form is accessible. If you have replaced it with a third-party form app, check that app’s accessibility.
  • Product option selectors: Custom product option apps sometimes create inaccessible dropdowns. Test them with keyboard navigation.
  • Email signup forms: Many Shopify apps for email popups and signup forms are not accessible. Look for popup apps that include keyboard support and proper labeling, or use your email platform’s (Mailchimp, Klaviyo) embedded form instead of a popup.

Squarespace

Squarespace’s built-in form blocks have improved over the years, but there are specific things to check:

  • Form fields include labels by default. Do not remove them in the form block settings.
  • Squarespace uses placeholder text in addition to labels. This is fine as long as the actual label remains visible.
  • Error handling is built in and generally accessible.
  • If you use a third-party form integration (like a Typeform or JotForm embed), that embedded form’s accessibility depends on the third-party tool, not Squarespace.

Third-Party Form Tools

If you embed forms from external tools, here is a quick accessibility rundown:

  • Google Forms: Reasonably accessible. Labels are always present. Keyboard navigation works. Not the prettiest, but functional.
  • Typeform: The conversational one-question-at-a-time format can be disorienting for screen reader users. It has improved in recent years but is still not ideal for accessibility.
  • JotForm: Offers an accessibility mode and has worked to improve compliance. Check their accessibility settings when building your form.
  • HubSpot Forms: Generally accessible with proper labels and error handling. Their embedded forms work well with screen readers.
  • Mailchimp Embedded Forms: The basic embedded form is accessible. The popup versions are less reliable.

Quick Fixes You Can Make Today

Regardless of your platform, these fixes address the most impactful problems.

Fix Your Labels

Go through every form on your site and make sure every field has a visible text label that stays visible when the user is typing. If you are using placeholder-only labels, add real labels.

Fix Your Button Text

Change any generic submit buttons to descriptive ones:

  • “Submit” becomes “Send Message” (contact form)
  • “Submit” becomes “Subscribe to Newsletter” (email signup)
  • “Go” becomes “Search” (search form)

Fix Your Required Field Indicators

If fields are required, indicate this with text — not just an asterisk and not just color. The best approach is adding “(required)” after the label text. If you use an asterisk, include a note at the top of the form that says “Fields marked with * are required.”

Fix Your Error Messages

If your form builder allows customization of error messages, make them specific and helpful. Instead of “This field is required,” use “Please enter your email address.” Instead of “Invalid input,” use “Please enter a phone number in the format 555-123-4567.”

Add a Non-Form Contact Option

At the bottom of your contact form, include a note like: “Having trouble with this form? Call us at (555) 123-4567 or email hello@yourbusiness.com.” This gives everyone an alternative path and protects you if the form itself has issues you have not caught yet.

Inaccessible forms are one of the most commonly cited issues in ADA web accessibility lawsuits, especially for e-commerce businesses. If a user cannot complete a checkout process, that is a clear barrier to accessing your goods and services.

Making your forms accessible is one of the highest-impact steps you can take to both improve your user experience and reduce legal exposure.

Moving Forward

Form accessibility does not have to be overwhelming. Start by running the four tests described in this article on your most important form (usually your contact form or checkout process). Fix what you can today, and work through the rest over the coming weeks.

Every form you fix opens your business to more customers and reduces your legal risk. It is one of the highest-return investments you can make in your website.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.