What does this accessibility issue mean?
Accessibility issue summary: Form field is missing label
To comply with WCAG Level A rules relating to form labels, all website form fields should have clear, easy-to-understand labels so users know what input data they should enter in each field.
Each form field should ideally have a single, unique label associated with it, providing unambiguous instructions for users to understand the purpose of the field.
Example HTML violation: Form without label (WCAG Level A Issue)
<form method="post">
<input name="search" type="text" />
<input type="submit" value="Search" />
</form> Explanation: The above code violates the 'Form without label' accessibility rule (rule-id: 'label') because the text input field doesn't have an associated <label> element. </label>
The <label> element provides a text description for the form control, which is necessary for screen reader users to understand the purpose of the form control. </label>
Here is the corrected HTML code with the issue resolved:
How to fix "Form without label (WCAG Level A Issue)" issue
<form method="post">
<label for="search-input">Search</label>
<input id="search-input" name="search" type="text" />
<input type="submit" value="Search" />
</form>In the corrected HTML code, a <label> element is added with a for attribute that matches the id of the input field it describes. This provides a text description ("Search") to the input field making it accessible to screen reader users.</label>
