</>
ValidateHTML

Missing Form Labels

Every form input (text fields, checkboxes, selects, textareas) needs an associated label element. Without a label, screen reader users don't know what information to enter in the field. Placeholder text is NOT a substitute for a label because it disappears when the user starts typing and is not announced by all screen readers.

Why It Matters

Forms without labels are unusable for screen reader users, which is a WCAG 2.1 Level A violation. It also affects users with motor disabilities who rely on clicking the label to focus the input (larger click target). Bad form labeling leads to higher form abandonment rates for all users.

Code Examples

Inaccessible
<!-- No label at all -->
<input type="email" placeholder="Email address">

<!-- Label not associated with input -->
<label>Email</label>
<input type="email" id="email">
Accessible
<!-- Explicit label with for attribute -->
<label for="email">Email address</label>
<input type="email" id="email">

<!-- Implicit label (wrapping) -->
<label>
  Email address
  <input type="email">
</label>

How to Fix

  • 1Add a <label> element with a 'for' attribute matching the input's 'id' for every form field.
  • 2Alternatively, wrap the input inside the <label> element for implicit association.
  • 3Never rely on placeholder text as the only label. Placeholders disappear on focus.
  • 4For inputs where a visible label doesn't fit the design, use aria-label or visually-hidden text.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker
Recommended

Hostinger Fast & Affordable Web Hosting

Deploy accessible, validated code on reliable hosting.

Get 80% Off Hosting →

Related Accessibility Errors

View all accessibility errors