We detected an element functioning as a combobox but missing the combobox role.
| Field | Value |
|---|---|
| Rule code | Manual_Combobox_Role_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
Elements that combine input with a popup selection list must be properly identified with the aria role of combobox, to ensure assistive technologies can accurately convey their purpose and functionality to users. Without this role, screen reader users may not recognize the component's interactive nature or understand how to operate it.
How to fix
Apply the combobox role to the container element of your dropdown/input combination:
<div role="combobox" aria-expanded="false" aria-controls="listbox-id" aria-haspopup="listbox">
<input type="text" aria-autocomplete="list" aria-controls="listbox-id">
</div>
<ul id="listbox-id" role="listbox">
<li role="option">Option 1</li>
<li role="option">Option 2</li>
</ul>
The combobox pattern requires several attributes:
- role="combobox" on the container element
- aria-expanded to indicate whether the popup is currently displayed
- aria-controls pointing to the ID of the listbox
- aria-haspopup="listbox" indicating what type of popup is shown
- aria-autocomplete on the input element ("list", "both", or "inline")
For editable comboboxes, the input field should be a child of the combobox element. For select-only comboboxes, the element with role="combobox" can be the same element that receives focus.