Why Accessibility in Forms Matters

Forms are the primary way users interact with web applications. Whether it is signing up for an account, completing a purchase, or submitting a support request, forms are where users provide their data. When forms are inaccessible, entire groups of people are locked out of your product.

Accessibility is not just about compliance with WCAG guidelines, although that matters too. It is about building products that work for everyone, including people using screen readers, keyboard-only navigation, voice control, or other assistive technologies.

Labels and Inputs

The most fundamental accessibility requirement for forms is properly associating labels with their inputs. Every form control must have a visible, descriptive label.

<div class="form-field">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required />
</div>

The for attribute on the label must match the id of the input. This creates a programmatic association that screen readers use to announce the input's purpose. It also increases the click target, since clicking the label focuses the associated input.

Avoid using placeholder text as a substitute for labels. Placeholders disappear when the user starts typing, which creates a memory burden and makes it harder to verify what information was requested.

Error Handling and Validation

When form validation fails, users need to understand what went wrong and how to fix it. Good error handling includes several elements:

  • Display error messages near the input they relate to, not just at the top of the form
  • Use aria-describedby to programmatically associate error messages with their inputs
  • Include the aria-invalid="true" attribute on inputs that have errors
  • Ensure error messages are specific and actionable, such as "Password must be at least 8 characters" rather than "Invalid input"
<div class="form-field">
  <label for="password">Password</label>
  <input
    type="password"
    id="password"
    name="password"
    aria-describedby="password-error"
    aria-invalid="true"
  />
  <p id="password-error" class="error" role="alert">
    Password must be at least 8 characters long.
  </p>
</div>

Keyboard Navigation

All form elements must be operable with a keyboard alone. Native HTML form elements get this for free, but custom components often break keyboard accessibility.

  • Use the Tab key to move between form fields in a logical order
  • Ensure focus indicators are visible and meet contrast requirements
  • Avoid removing the default focus outline without providing an alternative
  • Group related controls inside a fieldset with a descriptive legend

Testing Your Forms

Automated tools like axe or Lighthouse can catch many common accessibility issues, but manual testing is essential. Try navigating your form using only a keyboard. Test with a screen reader like VoiceOver or NVDA. Verify that error messages are announced when they appear. These simple tests reveal problems that no automated tool can detect.