Form Labels

This lesson explains Form Labels in web accessibility with clear examples, practical use cases, and implementation best practices.

Accessible Form Labels Overview

Form labels identify the purpose of form controls such as text fields, checkboxes, radio buttons, selects, and textareas. Properly associated labels help screen readers announce each field correctly while making forms easier to understand for all users.

Every interactive form control should have a visible label connected using the HTML label element and the for attribute. Avoid relying on placeholders as labels because they disappear when users begin typing and may not be announced consistently by assistive technologies.

Feature	Benefit
Visible Labels	Clearly identify every form field.
Screen Readers	Announce field names accurately.
Keyboard Navigation	Improves form usability.
Semantic HTML	Provides built-in accessibility.
WCAG Compliance	Supports accessible form design.
User Experience	Reduces input errors and confusion.

Accessible Label Example

<label for="username">
  Username
</label>

<input
  id="username"
  type="text"
  name="username">

The label is associated with the input using the for attribute. Clicking the label moves focus to the input, and screen readers announce the label automatically.

Common Labeling Techniques

Different form controls require different labeling approaches. Native HTML labels should always be the first choice whenever possible.

Technique	Recommended	Typical Usage
label + for	Yes	Text fields, selects, textareas.
Wrapped Label	Yes	Checkboxes and radio buttons.
fieldset + legend	Yes	Grouped form controls.
aria-labelledby	Sometimes	Custom form components.
aria-label	Sometimes	Icon-only controls.
Placeholder Only	No	Should not replace labels.

Accessible Form Label Best Practices

Best Practice	Description
Use Visible Labels	Display labels for every form control.
Associate Labels Correctly	Match the for attribute with the input id.
Use fieldset and legend	Group related controls together.
Write Descriptive Labels	Use clear, concise, and meaningful text.
Use ARIA Only When Needed	Prefer native HTML labels over ARIA attributes.
Test with Screen Readers	Verify labels are announced correctly.

Common Form Label Mistakes

Using placeholders instead of labels.
Leaving form controls without associated labels.
Using vague labels such as "Field" or "Input".
Not matching the label for attribute with the input id.
Using aria-label when a visible label is available.
Not grouping related radio buttons and checkboxes.
Hiding important labels with CSS.
Not testing labels using keyboard navigation and screen readers.

Key Takeaways

Every form control should have a visible label.
Use the HTML label element with the for attribute whenever possible.
Placeholders should never replace labels.
Use fieldset and legend for grouped form controls.
Use ARIA labeling only for custom or special-purpose controls.
Proper labels improve accessibility, usability, and WCAG compliance.

Pro Tip

A quick accessibility check is to click every form label. If the corresponding input receives keyboard focus, the label is correctly associated. This simple test catches many common accessibility issues before deployment.