label-title-only
Web validation
title attribute for their accessible name.A form control needs a name that both sighted and non-sighted users can perceive. Relying on the title attribute alone hides that name from sighted users and can cause inconsistent support in assistive technology. Provide a visible label usually with a <label> element, or use aria-label / aria-labelledby only when a visual label truly is impractical.
Pass Patterns
Explicit <label> creates a clear visual and programmatic name
The visible <label> is associated with the input, so every user can perceive the field's purpose.
<label for="search">Search</label>
<input type="text" id="search" />aria-label supplies a programmatic name when no visual label is needed
Note that this method is not recommended because the input field will lack a visible label which may violate the requirement of Success Criterion 3.3.2 Labels or Instructions.
<input type="search" aria-label="Search" />Label referenced with aria-labelledby
The input's aria-labelledby attribute references the id of a visible <span> that contains the label text.
<span id="last-name">Last Name</span>
<input type="text" aria-labelledby="last-name" />Fail Patterns
title attribute is the only name source
The field's name appears only in a tooltip on hover, so sighted users see no label.
<input type="text" title="User name" />title attribute fails to provide essential information to some users
Each radio button's option is only in its title, so sighted users can't tell the options apart without hovering over each one.
<h2>Select gender</h2>
<input type="radio" title="Male" />
<input type="radio" title="Female" />
<input type="radio" title="Prefer not to mention" />Try It Yourself
Assessing the UI
Consider visually impaired users who do not use a screen reader, and users with cognitive disabilities, dyslexia, or attention deficit disorder.
- Look at each form field on the page without hovering over it.
- Check whether visible text next to the field describes its purpose.
Expected result: Every field has a visible label that describes its purpose.
Actual result: A field's purpose only appears in a tooltip when you hover over it, or not at all.
FAQ
Why is this validation considered a best practice?
It encourages a predictable labeling method that benefits all users and aligns with common assistive-technology support, even though it is not tied to a specific success criterion.
Why is this issue marked as Serious?
Without a visible label, many users must guess a control’s purpose. Screen reader support for title as a name varies, and sighted keyboard users may overlook unlabeled fields entirely, blocking task completion.