Chapter 12 — Accessible Forms

Collect information with native controls that have clear labels, purposes, instructions, groups, and actions.

New concepts

Form, label, input types, select, option, optgroup, datalist, textarea, fieldset, legend, output, progress, meter, input groups, choice and switch presentation, submission names, autocomplete, persistent help text, required state, and explicit button types.

Read the Phase 8 gauge

What changes after Responsive CSS?

Responsive layout keeps controls usable at different widths. This chapter first establishes each control's accessible name, purpose, instructions, and relationship, then uses the inherited layout tools without changing meaningful source order.

Lessons

  1. 1. Labels and inputs
  2. 2. Select menus and textareas
  3. 3. Grouped choices and actions
  4. 4. Complete accessible form
  5. 5. Suggestions and option groups
  6. 6. Specialized inputs and status
  7. 7. Input groups
  8. 8. Choice styles and switches

Checkpoint

Build a small registration form with labelled personal-information fields, a grouped select, a datalist suggestion field, one specialized input, a textarea with persistent help, a fieldset of radio buttons, at least one input group with a prefix or suffix, one switch styled from a checkbox, required fields identified in text, and an explicit submit button. Add either a labelled output or a progress/meter status with its value stated in text, then test the page using only the keyboard.