What does this accessibility issue mean?
Accessibility issue summary: <select> element on a form is missing a label
Labels are essential for providing context and clarity to users, particularly those relying on assistive technologies such as screen readers.
A <select> element represents a dropdown menu or list of options, and a label helps users understand the purpose or content of that dropdown.
When a <select> lacks an associated label, it becomes challenging for users, especially those who use assistive technologies, to comprehend the function of the dropdown or discern the information being presented.
Make sure every <select> tag used on your website forms has an associated label for accessibility.
Example HTML violation: Form ‘select’ element is missing label (WCAG Level A Issue)
<form>
<select name="productCategory">
<option value="electronics">Electronics</option>
<option value="apparel">Apparel</option>
<option value="food">Food</option>
<option value="furniture">Furniture</option>
</select>
</form>In this non-accessible code example, the <select> element doesn't have an accessible name which is a violation of the 'select-name' rule. People who use assistive technologies have no way of knowing its purpose because there isn't a label or relevant attribute associating with it.
Below is the corrected HTML code with the problem resolved.
How to fix "Form ‘select’ element is missing label (WCAG Level A Issue)" issue
<form>
<label for="productCategory">Product Category</label>
<!--added a label for the select -->
<select id="productCategory" name="productCategory">
<option value="electronics">Electronics</option>
<option value="apparel">Apparel</option>
<option value="food">Food</option>
<option value="furniture">Furniture</option>
</select>
</form> In the corrected code, a <label> is added to give an accessible name to the <select> element.
The for attribute of label should be the same as the id attribute of <select>.
This way, assistive technologies can associate the label with the <select> element, thus users can understand its purpose.
