Accessible forms

📘What it really is

Everything from Modules 12 and 13 applies in React, plus a few connections only code can make:

• Every input has a visible <label htmlFor> matching its id.
• Connect error messages to their fields, so screen readers read them with the field:

<input
  id="email"
  name="email"
  type="email"
  value={form.email}
  onChange={handleChange}
  onBlur={() => setTouched(t => ({ ...t, email: true }))}
  aria-invalid={Boolean(showError("email"))}
  aria-describedby={showError("email") ? "email-error" : undefined}
/>
{showError("email") && <p id="email-error" className="error">{errors.email}</p>}

• aria-invalid tells assistive technology the field has a problem.

• Announce results like "Enquiry added" in an element with role="status" (or aria-live="polite"), so they're read out without moving focus.

• Don't rely on colour alone: error text, not just a red border.

• Test with the keyboard only (Tab, Shift+Tab, Enter) and run Lighthouse (Module 12).
• useId() creates unique ids for labels and descriptions, useful when a form component is used more than once on a page.