Accessible Form Design: UX Patterns That Work

Forms are critical touchpoints in any web application. Here's how to make them accessible without sacrificing user experience.

Label Everything

Every input needs a label. No exceptions.

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Bad: Placeholder is not a label -->
<input type="email" placeholder="Email address" />

Placeholders disappear when users type, causing confusion.

Error Handling

Errors should be: 1. Visible (not just color-based) 2. Associated with the input 3. Descriptive

<label for="password">Password</label>
<input
  type="password"
  id="password"
  aria-describedby="password-error"
  aria-invalid="true"
/>
<p id="password-error" class="error">
  Password must be at least 8 characters
</p>

Focus Management

Guide users through the form:

• Visible focus indicators
• Logical tab order
• Focus the first error on submission

input:focus-visible {
  outline: 2px solid #00c2cb;
  outline-offset: 2px;
}

Required Fields

Indicate required fields clearly:

<label for="name">
  Full name <span aria-hidden="true">*</span>
  <span class="sr-only">(required)</span>
</label>
<input type="text" id="name" required />

Also include a legend:

Fields marked with * are required

Form Structure

Use fieldsets for related inputs:

<fieldset>
  <legend>Shipping Address</legend>
  <!-- Address fields -->
</fieldset>

<fieldset>
  <legend>Billing Address</legend>
  <!-- Address fields -->
</fieldset>

Input Types

Use the correct input type:

• `type="email"` - Email validation, right keyboard
• `type="tel"` - Phone number keyboard
• `type="number"` - Numeric keyboard
• `inputmode="numeric"` - Numbers without spinner

Autocomplete

Help users fill forms faster:

<input
  type="text"
  autocomplete="given-name"
  name="firstName"
/>
<input
  type="text"
  autocomplete="family-name"
  name="lastName"
/>

Success States

Confirm successful submission clearly:

• Visual confirmation
• Focus management (move to success message)
• Clear next steps

Testing

Test your forms with:

1. Keyboard only navigation
2. Screen reader (VoiceOver, NVDA)
3. High contrast mode
4. Zoomed to 200%

Conclusion

Accessible forms benefit everyone—they're clearer, more usable, and convert better. Build accessibility in from the start rather than retrofitting later.