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 the id attribute of the corresponding form control.

• Failure:

  • Only title attribute is used to generate label for a form element.

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

• Deque University: label-title-only