A combobox element is missing an accessible label
| Field | Value |
|---|---|
| Rule code | Combobox_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
Comboboxes provide a user interface for selecting amongst a list of options. We detected a combobox that did not possess an accessible label provided via the aria-label attribute, referenced by a valid aria-labelledby attribute, or correctly associated with a visible HTML label element. Proper labeling is essential for assistive technologies to convey the purpose and functionality of the combobox.
How to fix
Ensure that each combobox has an accessible name by using an aria-label, associating it with an aria-labelledby attribute that references the ID of an element containing appropriate descriptive text, or correctly using a visible HTML label element. The label should be meaningful to end users.
Example:
<label for="comboInput">Choose a Profile</label>
<input id="comboInput" role="combobox" aria-haspopup="listbox" aria-expanded="false" />