Accessible Web Forms: A Practical Checklist

Why Form Accessibility Matters

Forms are the primary way users interact with web applications. An inaccessible form doesn't just fail WCAG compliance — it actively prevents people from using your product.

The Essential Checklist

Labels and Instructions

Every input needs an associated label. Not a placeholder — a real <label>:

<label for="email">
  Email address <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-required="true" />

Error Handling

Errors must be programmatically associated with their fields:

<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<p id="email-error" role="alert">
  Please enter a valid email address.
</p>

Keyboard Navigation

Every form element must be reachable via Tab key. Custom components need explicit tabindex and keyboard event handlers.

Focus Management

After form submission: - On success: move focus to the success message - On error: move focus to the first invalid field

function handleSubmit() {
  const firstError = document.querySelector('[aria-invalid="true"]')
  if (firstError instanceof HTMLElement) {
    firstError.focus()
  }
}

Testing with Screen Readers

Use VoiceOver (Mac) or NVDA (Windows) to test your forms. Listen for: - Field labels being announced - Required state being communicated - Error messages being read automatically - Form submission feedback