HTML forms: labels & fieldsets
This course covers how to connect captions to form controls so that browsers, screen readers and keyboard users can identify each field. It starts with why plain text above an input and placeholder text fall short. It then shows explicit labels with for and id, and implicit labels that wrap the control. Next come grouping controls with fieldset and legend, naming controls with aria-label when they show only an icon and with aria-labelledby when visible text already names them, and attaching hints and errors with aria-describedby. A final signup form combines every technique.
What you'll learn
- ✓Why placeholder text does not replace a label
- ✓Connecting labels to controls with for and id
- ✓Wrapping controls in labels and what not to nest inside them
- ✓Grouping related controls with fieldset and legend
- ✓Naming controls with aria-label and aria-labelledby
- ✓Attaching hints and errors with aria-describedby and aria-invalid
Why labels matter
Look back at every form you've built in the last two courses. Above each input sits a word: "Email", "Password", "Country". To your eyes it reads as a caption, sitting where a caption should sit. To a mouse, it's dead space; clicking it does nothing. To a screen reader, it's not even a caption,…
Read the full lesson free →Curriculum
7 lessonsWhy labels matter
Shows why text above an input and placeholder text fail as labels for screen readers and clicks.
Explicit labels: for and id
Explains explicit labels with for and id, unique IDs, flexible placement and the htmlFor property in JavaScript.
Implicit labels: wrapping the input
Covers nesting a control inside a label, which elements are labelable, and avoiding links or headings inside labels.
Grouping controls with fieldset and legend
Groups radio buttons and checkboxes with fieldset and legend, including the disabled attribute and nested fieldsets.
When label isn't enough: aria-label and aria-labelledby
Names icon-only and context-named controls with aria-label and aria-labelledby, and explains which name wins when several apply.
Hints, errors, and aria-describedby
Attaches hints and error messages with aria-describedby and pairs them with aria-invalid instead of relying on color.
Putting it together: an accessible signup form
Builds a signup form using every technique and compares what a screen reader announces with and without them.