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
- Every field has a visible label connected to it:
<label for="phone">Phone number</label> <input id="phone" name="phone" type="tel" autocomplete="tel">
- Don't use placeholders as labels. They vanish when typing starts and are often low contrast.
- Mark required fields in text (“required”), not only with a red asterisk, and add the
requiredattribute. - Explain errors in words, next to the field, and say how to fix them: “Enter an email like [email protected]”.
- Use autocomplete attributes (name, email, tel) so browsers and password managers can fill fields in. This also supports WCAG 1.3.5.
- Group related options (radio buttons) in a
fieldsetwith alegend. - Avoid puzzle CAPTCHAs. Prefer invisible checks or a honeypot field. WCAG 2.2's Accessible Authentication criterion discourages memory or puzzle tests at login.
- Confirm success in text that screen readers announce, e.g. a status region with
role="status". - 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
Check your own site
Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.