Accessible Forms

Problem

Screen reader users can’t determine what each form field is asking for, keyboard-only users struggle to navigate between inputs, and error messages appear visually but aren’t announced to assistive technology. This excludes millions of users from completing critical tasks like sign-up, checkout, or profile updates.

Solution

Associate every input with a descriptive label using the label element or aria-labelledby, announce validation errors through aria-live regions, and ensure logical tab order. This makes forms understandable and operable for screen readers and keyboard navigation.

Example

This example shows how to create an accessible form field with proper labeling, error messaging, and ARIA attributes that work with screen readers and assistive technologies.

<form>
  <!-- Associate label with input using the 'for' and 'id' attributes -->
  <label for="email">Email address</label>

  <!-- Input with accessibility attributes for error state -->
  <input
    id="email"
    type="email"
    aria-describedby="email-error"  <!-- Links to error message for screen readers -->
    aria-invalid="true"              <!-- Indicates this field has a validation error -->
  />

  <!-- Error message with role="alert" for screen reader announcement -->
  <div id="email-error" role="alert">
    Please enter a valid email address
  </div>
</form>

Benefits

• Enables screen reader users to understand what each form field is asking for.
• Improves keyboard navigation and reduces errors for all users.
• Required for WCAG compliance and reduces legal risks.
• Makes error messages accessible to assistive technology through announcements.
• Creates better user experience even for non-disabled users.

Tradeoffs

• Results in more verbose HTML with additional ARIA attributes and wrapper elements.
• Requires careful implementation to avoid incorrect ARIA that confuses screen readers.
• Can be more challenging to style labels and errors as cohesive units.
• Testing requires actual screen reader usage to verify correct behavior.
• May conflict with some CSS frameworks that expect specific HTML structures.