What does this accessibility issue mean?
Accessibility issue summary: Form field has multiple labels
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.
When multiple labels are present, it can lead to a lack of clarity and result in users being unsure about which label pertains to the specific input field they are navigating.
WCAG emphasizes the importance of providing clear and consistent labeling to ensure that web content is perceivable and understandable by all users, including those with disabilities. By following best practices and associating each form field with a single, descriptive label, web developers contribute to a more accessible and user-friendly experience, facilitating efficient navigation and interaction for individuals with varying needs and abilities.
Example HTML violation: Form field has multiple labels (WCAG Level A Issue)
<form action="">
<label for="search-field">Search our product</label>
<label for="search-field">Search</label>
<input id="search-field" name="search-field" type="text" />
<input type="submit" value="Search" />
</form> Explanation: The HTML code example above violates the 'Form field has multiple labels' accessibility rule because it has two label elements for the same form field (search-field).
This can cause problems for some combinations of screen readers and browsers as results are inconsistent from one combination to the next. Some combinations might read the first label, others the last label, and others both labels.Corrected HTML Code:
How to fix "Form field has multiple labels (WCAG Level A Issue)" issue
<form action="">
<label for="search-field">Search our product</label>
<!-- Removed the second label -->
<input id="search-field" name="search-field" type="text" />
<input type="submit" value="Search" />
</form>In the corrected HTML code above, we eliminate the second label for the form field id 'search-field'.
Now, this form field has only one label, and doesn't violate the 'Form field has multiple labels' accessibility rule.
