Why Accessible Forms Matter

Forms are the gateway to user interaction on the web. Whether it's signing up, logging in, or making a purchase, forms need to work for everyone—including users with disabilities.

The stakes are high:

• Inaccessible forms can prevent users from completing critical tasks
• Legal requirements (ADA, Section 508) mandate accessible forms
• Better accessibility = better user experience for everyone

The Foundation: Semantic HTML

Start with proper semantic HTML. It's the foundation of accessible forms.

Rule 1: Every Input Needs a Label

Labels are non-negotiable. They help everyone understand what information is needed.

Why Placeholders Aren't Labels

• Disappear when user starts typing
• Low contrast (hard to read)
• Not announced by all screen readers
• Can confuse users about what's already filled in

Solution: Use both labels and placeholders:

Rule 2: Group Related Fields

Use <fieldset> and <legend> to group related form controls.

Rule 3: Provide Clear Instructions

Tell users what's expected before they start filling out the form.

Rule 4: Validate Accessibly

Form validation must be perceivable to all users, including those using screen readers.

Inline Validation (Good)

Key Attributes for Validation

• aria-invalid="true" - Marks field as having an error
• aria-describedby="error-id" - Links field to error message
• role="alert" - Announces error to screen readers immediately
• required - Marks field as required

Rule 5: Error Handling

When validation fails, provide clear, actionable error messages.

Rule 6: Required Fields

Mark required fields clearly, both visually and programmatically.

Best Practice: Include a note at the top of the form:

Rule 7: Keyboard Accessibility

All form controls must be keyboard accessible.

Test this:

1. Press Tab to move forward through fields
2. Press Shift + Tab to move backward
3. Press Space to check/uncheck checkboxes
4. Press Enter to submit form
5. Use arrow keys for radio buttons and select dropdowns

Rule 8: Custom Controls Need ARIA

If you build custom controls (like custom dropdowns), you need ARIA.

Complete Accessible Form Example

Here's a complete example putting it all together:

Testing Checklist

• All inputs have labels
• Required fields are marked (visually and with required)
• Form can be completed with keyboard only
• Focus indicators are visible
• Error messages are announced to screen readers
• Instructions are provided before fields
• Related fields are grouped with fieldset/legend
• Autocomplete attributes are used
• Form works with screen reader (test with NVDA/JAWS/VoiceOver)

Conclusion

Accessible forms aren't difficult—they just require attention to detail and adherence to standards. Start with semantic HTML, add proper labels, provide clear instructions, and handle errors gracefully.

Your users (and your legal team) will thank you!

---

Try Our Tools

• Accessibility Code Playground - Test your forms
• HTML Formatter - Format your form code