Label title only

What it is

Every input field on your website — search boxes, email fields, quantity pickers, checkout fields, newsletter sign-ups — needs a clearly visible label that tells the user what to type. Right now, one or more of your fields uses only a "title" attribute (which shows as a browser tooltip on hover) or an `aria-describedby` attribute (which is hidden to sighted users) as its label. These hidden or tooltip-only labels look fine to most visitors, but they are invisible to screen readers used in the way they expect, and they disappear entirely on touch screens, keyboard-only navigation, and many assistive technologies. A true accessible label is text that is always visible on screen next to the field, or at minimum announced correctly by all assistive technology via a proper `<label>` element or `aria-label`.

Why it matters

Failing this check means your store is not compliant with WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 3.3.2 (Labels or Instructions), which are the accessibility standards referenced by ADA, Section 508, and the European Accessibility Act. This creates real legal risk — accessibility lawsuits against e-commerce stores have increased sharply, and missing form labels are one of the most commonly cited issues. Beyond legal exposure, unlabeled fields make checkout and sign-up forms unusable for the roughly 1-in-5 shoppers who have a disability, directly costing you conversions. Search engines also use accessible markup as a quality signal, so fixing this supports your overall SEO health.

How to fix it

1. Identify every form field flagged by your accessibility scanner — common culprits are search bars, email/newsletter inputs, quantity fields, coupon code boxes, and checkout address fields.
2. For each field, add a visible `<label>` element that is explicitly linked to the input using matching `for` and `id` attributes (e.g., `<label for="email">Email address</label><input type="email" id="email">`).
3. If a visible label is genuinely impossible due to design constraints (e.g., an inline search bar), use `aria-label` directly on the `<input>` element instead of relying on the `title` attribute (e.g., `<input type="search" aria-label="Search products">`). Remove any `title`-only or `aria-describedby`-only labeling from these fields.
4. Never use the `title` attribute or `aria-describedby` alone as the sole label for a form control — these are supplementary descriptions, not primary labels, and are not reliably announced by all screen readers.
5. Test your fix: use a screen reader (NVDA + Firefox, or VoiceOver on Mac/iOS) and navigate to the form field with the Tab key — the screen reader should announce a meaningful label immediately when the field receives focus.
6. Re-run your accessibility scanner to confirm the `label-title-only` violations are resolved before publishing.

<label for="email-field">Email address</label>
<input type="email" id="email-field" name="email" placeholder="you@example.com">

<!-- OR, for a visually-constrained search bar where a visible label isn't shown: -->
<input type="search" aria-label="Search products" placeholder="Search…">

<!-- ❌ WRONG — title-only or aria-describedby-only labeling: -->
<input type="email" title="Enter your email" placeholder="Email">
<input type="text" aria-describedby="hint-text"><span id="hint-text">Your name</span>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Forms tutorial — W3C WAI
• ARIA basics — MDN