When a label element lacks a text label or an associated control, it can lead to several issues:
- Poor Accessibility: Screen readers rely on correctly associated labels to describe the function of the form control. If the
label is not properly associated with a control, it can make the form difficult or impossible for visually impaired users to understand or interact
with.
- Confusing User Interface: Labels provide users with clear instructions about what information is required in a form control.
Without a properly associated label, users might not understand what input is expected, leading to confusion and potential misuse of the form.
- Code Maintainability: Properly structured and labeled code is easier to read, understand, and maintain. When labels are not
correctly associated, it can make the code more difficult to navigate and debug, especially for new developers or those unfamiliar with the
codebase.
Control elements are: * <input> * <meter> * <output> * <progress> *
<select> * <textarea>
Exceptions
Custom components may contain control elements, therefore label elements containing custom elements do not raise issues.
