Blog CMS Kit

Published

1 min read216 words

## 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>`:

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

> **Warning:** Never use placeholder text as the only label. Placeholders disappear when users type, leaving them without context.

### Error Handling

Errors must be programmatically associated with their fields:

```html
<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

```tsx
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