• June 1, 2025

Accessible Form Labels: Avoid Title-Only Labeling

Rule ID: label-title-only
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: Deque Best Practice

How to Fix the Problem

To ensure form inputs are accessible to all users—including those using assistive technologies—every form control must have a proper label. Avoid relying solely on title or aria-describedby attributes, as they do not provide a sufficient programmatic label.

Recommended Labeling Methods

✅ Explicit Labels (Preferred)

Use the <label> element with a for attribute that matches the id of the corresponding form control:

This method is widely supported and clearly communicates the purpose of the form control to screen readers and other assistive technologies.

✅ Implicit Labels

Wrap the form control inside the <label> tag:

While this method is valid, it can be inconsistently supported—especially for elements like select menus. Use with caution.

✅ ARIA Labeling (Use Only If Necessary)

Only use ARIA attributes like aria-label or aria-labelledby when traditional <label> elements cannot be used due to design constraints.

Example using aria-label:

Example using aria-labelledby:

⚠️ Important: Avoid using aria-label or aria-labelledby unless you have a strong reason to do so, as these methods are invisible to sighted users and less intuitive for developers.

Why it Matters

Labels play a critical role in ensuring form accessibility. Screen readers use labels to communicate the function of a form control to users. When developers use only the title or aria-describedby attribute, these are treated as supplementary hints—not as the main programmatic label.

Without a proper label:

• Screen readers may not announce the purpose of the input field.

• Users with visual impairments may become confused or unable to complete the form.

• Automated accessibility checkers will flag the form as non-compliant.

Rule Description

Form elements like <input>, <select>, and others must have an accessible name derived from a label—this cannot be accomplished solely with title or aria-describedby attributes. These attributes are designed to provide hints or advisory content, not serve as the primary label.

The Algorithm (in Simple Terms)

The rule checks each form input to see if it:

• Has a proper <label> element (explicit or implicit), OR

• Uses aria-label or aria-labelledby as a last resort.

It fails the input if its only descriptive attribute is title or aria-describedby.