A listbox element is missing an accessible label
| Field | Value |
|---|---|
| Rule code | Listbox_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
Listbox elements provide a list of options and allow users to select one or more options. We detected a listbox that did not possess an accessible label provided via the aria-label attribute or referenced by a valid aria-labelledby attribute. Without an accessible name, the purpose and information conveyed through the listbox may not be announced accessibly with assistive technologies.
How to fix
Add an aria-label or associate the listbox with an aria-labelledby attribute that references the ID of an element containing appropriate descriptive text. Ensure that the accessible name is not only present but meaningful to end users.
Example:
<div id="listLabel">Choose an Option</div>
<select role="listbox" aria-labelledby="listLabel">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>