Forms accessibility

Labels and associations

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

<!-- ✓ 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.

<!-- 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.

<label for="name">
  Name <span aria-label="required">*</span>
</label>
<input id="name" required aria-required="true" />

Help text and hints

can use aria-describedby to link to help text