An HTML Element with listbox functionality is missing the listbox role.
| Field | Value |
|---|---|
| Rule code | Manual_Listbox_Role_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
A listbox is a widget that allows the user to select one or more items from a list of choices. Listboxes contain child elements with a role of option or elements with a role of group, which, in turn, contain children with a role of option. Without an accessible listbox role, the grouping of options or the options within the listbox may be unclear to users utilizing screen readers.
How to fix
Ensure that each HTML element acting as a listbox has the appropriate ARIA listbox role. When adding the listbox role to an element, ensure that its child elements have a role of option. If options are grouped, assign a role of group to the container that groups them, while the individual options receive the option role. For example: "<p id="listbox1label" role="label">Select a color:</p><div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" onclick="return listItemClick(event);" onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);" aria-activedescendant="listbox1-1"><div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div><div role="option" id="listbox1-2">Orange</div><div role="option" id="listbox1-3">Red</div><div role="option" id="listbox1-4">Blue</div><div role="option" id="listbox1-5">Violet</div><div role="option" id="listbox1-6">Periwinkle</div></div>"