Ensure That Every Form Element Has a Visible Label and Is Not Solely Labeled Using Hidden Labels, or the Title or aria-describedby Attributes

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Form <input> elements may be given a title using the title or aria-describedby attribute, but not both.

Why It Matters

The title and aria-describedby attributes are used to provide additional information such as a hint. Hints are shown to accessibility APIs differently than labels, which can cause problems with assistive technologies.

Fixing the Issue

Developers should ensure that every <input> that requires a label has a label other than the title or aria-describedby attributes.

Good Code Examples

The label is applied directly to the element, and is completely invisible, which is a huge disadvantage for all sighted users, but screen readers will read the label.

Code example
<input type="text" aria-label="Search"> Copy

As with aria-label, this method should NOT be used unless there is a compelling reason to use it. This example is overly-simplistic, just to show aria-labelledby works on a technical level. Using aria-labelledby in such a straightforward circumstance is inappropriate. A more standard <label> tag would be better.

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

Explicit Labels

Create an explicit association by giving the label element a for attribute with the same value as the form control’s id attribute. This provides a one-to-one mapping between the label and the element. This is the best approach for labeling as it is supported by all modern browsers and all major assistive technologies for all form elements.

Explicit labels make the association unambiguous for assistive technologies.

Code example
<label for="fname">First Name:</label> <input type="text" name="fname" id="fname"><br> <label for="lname">Last Name:</label> <input type="text" name="lname" id="lname"> Copy

Implicit Labels

Even though we recommend creating explicit labels, create an implicit association by putting the form control inside the label element. This approach has inconsistent support among assistive technologies. For instance, when this approach is used on a text input, JAWS will read the label as intended, but when this approach is used in a select menu, it won’t be read.

Implicit labels are allowable, but are not as broadly applicable or as reliable as explicit labels.

Code example
<label>First Name: <input type="text" name="fname"></label><br> <label>Last Name: <input type="text" name="lname"></label> Copy