Form elements should have a visible label

The title and aria-describedby attributes serve a supplementary role in accessibility — they convey hints, tooltips, or additional descriptions. However, they are not treated as primary labels by accessibility APIs. When a screen reader encounters a form field that has only a title or aria-describedby attribute and no proper label, it may present the text as advisory information rather than as the field’s name. This makes it difficult or impossible for users to understand what input is expected.

This issue primarily affects users who are blind, deafblind, or who rely on assistive technologies such as screen readers. It can also impact users with mobility impairments who use voice control software, since voice control often relies on visible labels to target form elements. A missing visible label also hurts sighted users who may not see a tooltip until they hover over the element.

This rule is classified as a Deque Best Practice and aligns with the broader intent of WCAG Success Criterion 1.3.1 (Info and Relationships), which requires that information and relationships conveyed visually are also available programmatically, and SC 2.4.6 (Labels or Instructions), which requires that labels describe the purpose of form controls. While title and aria-describedby do expose some text, they do not fulfill the requirement for a reliable, programmatically determinable label.

How to Fix It

Every form control needs a proper accessible name. You can provide one using any of these methods:

1. Explicit <label> element — Associate a <label> with the form control using matching for and id attributes. This is the most reliable and widely supported approach.
2. Implicit <label> element — Wrap the form control inside a <label> element. This works in most assistive technologies but has inconsistent support in some combinations (e.g., JAWS with <select> menus).
3. aria-labelledby — Reference visible text elsewhere on the page by its id. Useful for complex labeling scenarios.
4. aria-label — Apply an invisible label directly to the element. Use this only when a visible label is truly not feasible.

In most cases, an explicit <label> is the best choice. It creates a clear association, provides a larger click/tap target, and is universally supported.

Examples

Incorrect: Using Only title

The title attribute provides a tooltip on hover but does not create a proper accessible label.

<input type="text" title="Enter your email address">

Incorrect: Using Only aria-describedby

The aria-describedby attribute provides a description, not a label. Screen readers may announce this text differently or skip it in certain contexts.

<p id="email-hint">Enter your email address</p>
<input type="text" aria-describedby="email-hint">

Correct: Explicit <label> Element

This is the recommended approach. The for attribute on the <label> matches the id on the input, creating an unambiguous association.

<label for="email">Email Address</label>
<input type="text" id="email" name="email">

You can still use title or aria-describedby for supplementary hints alongside a proper label:

<label for="email">Email Address</label>
<input type="text" id="email" name="email" title="e.g., user@example.com">

Correct: Implicit <label> Element

Wrapping the input inside the <label> creates an implicit association. This works for most assistive technologies but is less reliable than explicit labels.

<label>
  Email Address
  <input type="text" name="email">
</label>

Correct: Using aria-labelledby

Reference visible text on the page by its id. This is useful when the labeling structure is complex, such as data tables with form controls, or when multiple elements share a label.

<p id="email-label">Email Address</p>
<input type="text" aria-labelledby="email-label">

Correct: Using aria-label

This provides a label that is invisible on screen. Use it only when a visible label cannot be provided, such as a search field with a clearly identifiable search icon and button.

<input type="text" aria-label="Search">
<button type="submit">Search</button>

Note: Because aria-label is not visible, sighted users get no label text. Prefer a visible <label> whenever possible.

Learn more:

Deque Reference

Deque University - How To Fix

→