Make sure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes

The label-title-only rule checks that all form controls have a proper label using <label>, aria-label, or aria-labelledby, and are not relying only on title or aria-describedby, which provide only advisory information.

What is being tested?

This rule ensures that:

• Form elements like <input>, <select>, and <textarea> have a programmatically determined label.
• The label comes from a <label> tag, aria-label, or aria-labelledby, not just title or aria-describedby.

Using aria-label and aria-labelledby

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

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

These attributes provide invisible labels for screen reader users. However, they should be used only when necessary, as a <label> element is usually the better choice.

Explicit labels

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

This is the most reliable and widely supported method. The for attribute connects the <label> to the form control’s id.

Implicit labels

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

This wraps the input inside the label. While usable, it has inconsistent support across assistive technologies and is less recommended.

Why it matters

Labels ensure that screen readers can announce the purpose of form controls. Attributes like title or aria-describedby provide only hints, not formal labels. Without a proper label, assistive technologies may fail to communicate what the input is for, leading to confusion and errors.

Best practices

• Prefer explicit <label> elements.
• Use aria-label or aria-labelledby only when standard labels are impractical.
• Avoid relying solely on title or aria-describedby for labeling form fields.