# Forms accessibility — Web Accessibility (A11y)

Source: https://www.skillbyai.com/en/accessibility/a11y-forms

> Build accessible forms with bound labels, fieldsets, clear error messages and help text linked by aria-describedby.

## Labels and associations

Use `<label>` with `for` attribute to bind to `<input id>`. Screen readers announce the label. Placeholder is not a label.

```html
<!-- ✓ Correct: label tied to input -->
<label for="email">Email address</label>
<input id="email" type="email" name="email" />

<!-- ✗ Wrong: placeholder ≠ label -->
<input type="email" placeholder="Email address" />
```

## Grouping form fields

Use fieldset and legend for radio buttons and checkboxes.

```html
<!-- Fieldset + Legend -->
<fieldset>
  <legend>Preferred contact method</legend>
  <label>
    <input type="radio" name="contact" value="email" />
    Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone" />
    Phone
  </label>
</fieldset>
```

## Error messaging

Announce errors with `aria-live`, point to errors from label/hint, allow users to fix and resubmit. Never relay errors through color alone.

## Required field indicators

Mark required fields clearly with text, not just asterisk.

```html
<label for="name">
  Name <span>(required)</span>
</label>
<input id="name" required />
```

## Help text and hints

Link an input to its help text with `aria-describedby`, so screen readers announce the hint after the label.