# Form elements should have a visible label

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/label-title-only
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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.

```html
<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.

```html
<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.

```html
<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:

```html
<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.

```html
<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.

```html
<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.

```html
<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.