Definition
Form markup patterns that ensure every control is programmatically labeled, logically grouped, and operable by keyboard and assistive technology users.
Why It Matters
Ensuring that forms can be used by everyone, regardless of disability, is both a legal requirement and a moral imperative for any digital product. Accessible forms are the gatekeepers of participation in the modern digital economy, from banking to voting.
Core Concepts
<!-- Explicit association -->
<label for="username">Username:</label>
<input type="text" id="username" name="user">
<!-- Grouping related fields -->
<fieldset>
<legend>Gender</legend>
<input type="radio" id="male" name="gender" value="m">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="f">
<label for="female">Female</label>
</fieldset><label>: Associates visible text with a control (implicit nesting or explicitfor/idpairing).<fieldset>/<legend>: Groups related controls under a descriptive caption.- Label Placement: Above fields for fast scanning; left for deliberate reading.
- Primary Action: Make Submit visually dominant over Reset/Cancel.
- Minimize Fields: Every unnecessary question reduces completion rates.