label-title-only
Form <input>
elements should have a true label.
Description
To maintain proper accessibility, it is necessary to ensure that <input>
elements requiring a label have a label assigned, distinct from the title
or aria-describedby
attributes. While the title
or aria-describedby
attributes can be used to provide supplementary information or hints for <input>
elements, it is important not to rely solely on these attributes as a substitute for a proper label.
Why is it important?
The title
and aria-describedby
attributes serve to offer additional information, including hints, to assistive technologies. However, relying solely on these attributes for form inputs such as text entry fields, radio buttons, checkboxes, and select menus can cause issues with screen readers. When these inputs lack labels other than the title
and aria-describedby
attribute values, screen readers interpret the content as advisory rather than providing a proper label that conveys the purpose of the input form element programmatically. It is important to include explicit labels to ensure accurate interpretation and comprehension by assistive technologies.
Examples
-
Success:
- There exists an explicit association by assigning the label element a
for
attribute with the identical value as theid
attribute of the corresponding form control.
- There exists an explicit association by assigning the label element a
-
Failure:
- Only
title
attribute is used to generate label for a form element.
- Only
How to fix?
To ensure form controls are accessible, it is important to provide each control with a label using either aria-label
, aria-labelledby
, an implicit <label>
, or an explicit <label>
. While using standard form labels with the <label>
tag is generally recommended, there are alternative methods available. One option is to create an implicit association by placing the form control inside the label
element, although support for this approach can vary across assistive technologies. Additionally, the aria-label
attribute allows direct labeling of various HTML elements, including form elements, paragraphs, and tables. On the other hand, the aria-labelledby
attribute enables referencing a text label located elsewhere on the webpage.
Tags
cat.forms, best-practice
References
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!