Last updated
Label Best Practices
- Always use visible labels — never rely on placeholder text alone
- Use for/id association or wrap inputs in label elements
- Group related radio buttons and checkboxes with fieldset + legend
- Link error messages to their fields with aria-describedby
- Include format hints in labels for date, phone, and other formatted fields
- Position labels above inputs for best mobile usability
The Form Label Checker on TechConverter.me identifies all labeling issues in your HTML forms, explains why each issue matters for accessibility, and provides specific code fixes — helping you build forms that work for all users including those who rely on screen readers.
Examples
Example 1: Missing Label (Most Common Issue)
<!-- Problematic: no label associated with input -->
<input type="email" placeholder="Enter your email">
Checker output:
Element: input[type="email"]
Issue: No label associated with this form field
Screen reader announces: "edit text" (no context)
WCAG 1.3.1: FAIL
WCAG 3.3.2: FAIL
Fixed versions:
<!-- Option 1: Explicit label with for/id association -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">
<!-- Option 2: Implicit label (wrapping) -->
<label>
Email address
<input type="email" placeholder="you@example.com">
</label>
<!-- Option 3: aria-label for icon-only inputs -->
<input type="search" aria-label="Search products" placeholder="Search...">
Example 2: Placeholder Used as Label
<!-- Problematic: placeholder disappears when user types -->
<input type="text" placeholder="First name">
<input type="text" placeholder="Last name">
<input type="email" placeholder="Email">
Checker output:
3 fields use placeholder text as their only label.
Issue: Placeholder text disappears when user starts typing.
Users cannot check what a field requires after entering data.
WCAG 3.3.2: FAIL (insufficient labeling)
Fix: add visible labels above each field
<!-- Fixed: visible labels + helpful placeholder hints -->
<div class="form-group">
<label for="first-name">First name</label>
<input type="text" id="first-name" placeholder="e.g. Alice">
</div>
<div class="form-group">
<label for="last-name">Last name</label>
<input type="text" id="last-name" placeholder="e.g. Johnson">
</div>
Example 3: Radio Button Group Missing Fieldset/Legend
<!-- Problematic: individual labels present but no group context -->
<label><input type="radio" name="plan" value="basic"> Basic</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
Screen reader announces: "Basic, radio button" — no context about what is being selected
WCAG 1.3.1: FAIL (group relationship not conveyed)
<!-- Fixed: fieldset + legend provides group context -->
<fieldset>
<legend>Select your plan</legend>
<label><input type="radio" name="plan" value="basic"> Basic</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
Screen reader announces: "Select your plan group, Basic, radio button 1 of 3"