A contact form is where leads turn into conversations, so it has to work for everyone — keyboard users, screen readers, people on a phone in bright L.A. sun. Here is how to build one that is accessible, fast, and actually gets filled out.

Before you start

  • A page to edit — Access to your site's contact page and whatever builds it — raw HTML, a form plugin, or your CMS.
  • A keyboard — The single best accessibility tool you own. If you can complete the form with Tab and Enter alone, you are most of the way there.
  • A free checker — Browser tools like axe DevTools or Lighthouse to catch the issues your eyes miss.

1. Start with a real <form> and native inputs

Wrap your fields in a <form> element and use native <input>, <textarea>, and <button> tags. Skip the div-and-JavaScript approach — native elements come with keyboard support, focus, and validation built in for free.

2. Label every field properly

Give each input a visible <label> tied to it with matching for and id attributes. Never rely on placeholder text as a label — it disappears the moment someone starts typing and screen readers handle it inconsistently.

3. Group and order the fields logically

Keep the field order top-to-bottom and left-to-right so tab order matches reading order. Use <fieldset> and <legend> to group related fields, like a set of radio buttons for "how can we help?"

4. Set the right input types and autocomplete

Use type="email", type="tel", and inputmode so mobile keyboards adapt. Add autocomplete="name", "email", and "tel" so browsers can fill fields in one tap — a huge win for everyone, especially people using assistive tech.

5. Make errors clear and announced

When validation fails, show a plain-English message next to the field, link it with aria-describedby, and mark the field aria-invalid="true". Put a summary at the top of the form in an aria-live region so screen reader users hear what went wrong.

6. Mind focus, contrast, and touch targets

Keep a visible focus ring (never remove the outline), hit 4.5:1 text contrast, and make the submit button and inputs at least 44px tall so they are easy to tap. Test the whole thing with the keyboard alone — no mouse.

7. Confirm submission and stop spam kindly

After submit, move focus to a clear success message so everyone knows it worked. Block spam with a honeypot field or an accessible challenge — avoid old-school CAPTCHAs that lock out screen reader and low-vision users.