All form inputs are properly labeled

Unlabeled form inputs are completely invisible to screen readers — when a blind user tabs to an input field, their assistive technology announces only 'edit text' or 'text field' with no indication of what information belongs there. This violates WCAG 2.2 SC 1.3.1 (Info and Relationships) and SC 3.3.2 (Labels or Instructions), and constitutes a Section 508 2018 Refresh 502.3.3 failure. In a login form, the user cannot tell whether they are in the username or password field. In a checkout form, they cannot distinguish billing address from shipping address. The practical consequence: screen reader users abandon the form entirely, creating both an ADA compliance liability and lost conversions.

Associate every form input with a label using htmlFor/id pairing, a wrapping <label>, or an ARIA attribute. The placeholder attribute alone does not satisfy WCAG 2.2 SC 3.3.2 — it disappears on input and has low contrast. In src/components/forms/ or wherever form components live:

// Preferred: explicit label association
<label htmlFor="email">Email Address</label>
<input id="email" type="email" name="email" />

// Icon-only input with no visible label
<input
  id="search"
  type="search"
  aria-label="Search products"
/>

// When label is elsewhere in DOM
<h2 id="billing-heading">Billing Address</h2>
<input
  id="billing-street"
  type="text"
  aria-labelledby="billing-heading"
/>

Audit all <input>, <textarea>, and <select> elements. A placeholder text that says 'Email' is not a label.