label-title-only

Add visible label for <input> elements.

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?

Screen reader users rely heavily on labels to understand the purpose of form inputs. Without a label, users may struggle to determine the meaning or context of an input field, leading to confusion and frustration. Labels provide additional context and clarity, making it easier for users to navigate and interact with forms effectively. Explicit labels, rather than relying solely on the title attribute or aria-describedby attribute, are required for form <input> elements. While title and aria-describedby attributes can be used to associate descriptive text with form inputs, these are typically used for providing supplementary information rather than primary labels. Explicit labels ensure compatibility with a wide range of assistive technologies and help maintain consistency in how form inputs are interpreted and presented.

How to fix?

To ensure form controls are accessible, it is important to provide each control with a label:

• Using an explicit <label> element: For each form input, use an explicit <label> element that is associated with the input using the for attribute, which should have a value equal to the input’s id attribute.
• Using an implicit <label> element: Wrap the input element within a <label> element. This associates the label implicitly with the input.
• Using aria-label: Use the aria-label attribute directly on the input element to provide a label.
• Using aria-labelledby: Use the aria-labelledby attribute on the input element to reference the ID of another element that serves as the label.