• June 1, 2025

Accessible Form Labels: Avoid Relying Solely on Title or aria-describedby

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

How to Fix the Problem

Every form control that collects user input must have an accessible label. Relying solely on the title attribute or aria-describedby is not sufficient because these are not interpreted as labels by most assistive technologies.

Preferred Methods for Labeling

1. Explicit <label> Tag (Best Practice)

   • Use a <label> element with a for attribute that matches the id of the input field.

   • This is the most reliable method, supported across all major browsers and screen readers.

   html

   KopierenBearbeiten

   <label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">


2. Implicit <label> Tag

   • Nest the input element directly inside the label tag.

   • While still valid, this approach has inconsistent support across assistive technologies, especially for controls like select menus.

   html

   KopierenBearbeiten

   <label>First Name: <input type="text" name="fname"></label>


3. Using aria-label

   • Directly applies an invisible label to the element.

   • Not visually apparent, which could confuse sighted users unless there is accompanying visual text.

   • Use only when traditional <label> usage is not feasible.

   html

   KopierenBearbeiten

   <input type="text" aria-label="Search">


4. Using aria-labelledby

   • Refers to visible text elsewhere on the page.

   • Useful in more complex labeling situations where multiple controls need to be associated with shared or dynamic text.

   html

   KopierenBearbeiten

   <p id="searchLabel">Search</p>
<input type="text" aria-labelledby="searchLabel">


⚠️ Important Note: title and aria-describedby may provide helpful hints, but they do not count as programmatically associated labels and should not be the only means of labeling.

Why it Matters

Labels provide critical context to all users, particularly those using assistive technologies like screen readers. Without a proper label:

• Screen readers may announce only generic terms like “edit,” “text box,” or provide misleading context.

• The purpose of the form element becomes ambiguous, creating confusion and reducing accessibility.

• Users may struggle to understand what information is required or what action they are expected to perform.

Using only title or aria-describedby attributes for labeling is not sufficient because these are interpreted as advisory hints rather than definitive, accessible labels. This can severely impact users who rely on programmatic relationships between labels and input fields.

Rule Description

Form inputs that rely solely on the title or aria-describedby attributes do not meet accessibility requirements for labeling. These elements must have a true, programmatically associated label to ensure screen readers and other assistive technologies can accurately convey their purpose.

The Algorithm (in simple terms)

Check each <input> element:

• If it requires a label, confirm it is not labeled only with title or aria-describedby.

• Confirm that it has one of the following:

  • A <label> associated via for and id.

  • An aria-label attribute.

  • An aria-labelledby attribute pointing to existing visible text.