Ensure That Every Form Element Has a Visible Label and Is Not Solely Labeled Using Hidden Labels, or the Title or aria-describedby Attributes
Blind
Hearing
Mobility
WCAG 2.1 Level A
Form <input> elements may be given a title using the title or aria-describedby attribute, but not both.
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.
Developers should ensure that every <input> that requires a label has a label other than the title or aria-describedby attributes.
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.
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.
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.
<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.
<label>First Name: <input type="text" name="fname"></label><br>
<label>Last Name: <input type="text" name="lname"></label>
Copy