Forms: Building User-Friendly, Accessible Interactions
Forms are how users interact with your website—signing up, submitting feedback, registering for events, and more. But poorly designed forms can be confusing or impossible to use for people with disabilities. Accessible forms ensure that all users can input, understand, and successfully submit their information.
Label Form Fields Clearly
Every form input must have a visible, programmatically associated label. This allows screen readers to announce the field’s purpose.
Do:
<label for="email">Email Address</label>
<input type="email" id="email" name="email" />
Don’t:
Use placeholder text as a substitute for labels—it disappears as users type and can be unreadable for some users.
Group Related Form Elements
Use fieldsets and legends to group related options, such as multiple checkboxes or radio buttons. This gives users important context, especially when using assistive tech.
Example:
<fieldset>
<legend>Preferred Contact Method</legend>
<input type="radio" id="email" name="contact" value="email" />
<label for="email">Email</label>
<input type="radio" id="phone" name="contact" value="phone" />
<label for="phone">Phone</label>
</fieldset>
Provide Helpful Error Messages
Users need to understand when and why a form submission failed—and how to fix it.
Best Practices:
- Show error messages next to the relevant field.
- Use clear, specific language: “Please enter a valid email address.”
- Mark errors in both text and visual cues (like color + icons).
- Allow users to correct only the affected fields—don't make them start over.
Give Instructions and Hints
Where applicable, provide instructions before the user fills out the field.
Example:
<label for="password">Create a password</label>
<span id="pw-hint">Must be 8–20 characters long.</span>
<input type="password" id="password" name="password" aria-describedby="pw-hint" />
Use aria-describedby to connect hint text to the field.
Keyboard and Screen Reader Considerations
- Ensure users can tab through form fields in a logical order.
- Use accessible error handling (e.g., focus on the error message or problematic field).
- Ensure custom widgets (like date pickers) are keyboard-navigable and screen reader-friendly.
Use Appropriate Input Types
HTML5 input types help browsers and assistive tech provide optimized experiences.
Examples:
<input type="email" /> <!-- for email addresses -->
<input type="tel" /> <!-- for phone numbers -->
<input type="number" /> <!-- for numeric input -->
These input types improve usability on mobile and validation for all users.
Quick Checklist
✅ Each input has a clear, associated <label>
✅ Instructions and error messages are descriptive and accessible
✅ Placeholder text is not used as a label
✅ Group related inputs with <fieldset> and <legend>
✅ Error feedback is provided both visually and textually
✅ Tab order is logical and intuitive
✅ Input types match the expected data
✅ Form works with keyboard and screen readers