How to make your contact form accessible

A contact or booking form is often the most valuable thing on a small-business site, and it's where many visitors get stuck.

Checklist

1. Every field has a visible label connected to it:

   <label for="phone">Phone number</label>
   <input id="phone" name="phone" type="tel" autocomplete="tel">

2. Don't use placeholders as labels. They vanish when typing starts and are often low contrast.
3. Mark required fields in text (“required”), not only with a red asterisk, and add the required attribute.
4. Explain errors in words, next to the field, and say how to fix them: “Enter an email like [email protected]”.
5. Use autocomplete attributes (name, email, tel) so browsers and password managers can fill fields in. This also supports WCAG 1.3.5.
6. Group related options (radio buttons) in a fieldset with a legend.
7. Avoid puzzle CAPTCHAs. Prefer invisible checks or a honeypot field. WCAG 2.2's Accessible Authentication criterion discourages memory or puzzle tests at login.
8. Confirm success in text that screen readers announce, e.g. a status region with role="status".
9. Make sure the whole form works with only a keyboard: Tab through it and submit with Enter.

Related guides

• How to test your website with only a keyboard (5-minute check)
• Accessibility overlay widgets vs. fixing your site's code
• Heading structure: how H1–H6 help accessibility and SEO
• Restaurant menus and PDFs: making them accessible online

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.