Listbox element is not keyboard operable
| Field | Value |
|---|---|
| Rule code | Manual_Listbox_Keyboard_Inoperable |
| WCAG conformance level | A |
| WCAG success criterion | 2.1.1 Keyboard |
| Must be fixed at source | No |
Description
A listbox element on the page has been detected that is not operable via the keyboard. This creates accessibility barriers for users who rely on keyboard navigation, as they may be unable to activate the listbox and navigate to the listbox options, thus hindering their ability to interact with the content.
How to fix
Ensure the listbox and its options are keyboard operable by adding proper role attributes (role="listbox" for the container, role="option" for each selectable item), setting tabindex="0" on option elements, implementing aria-selected states that update on selection, enabling Space/Enter key activation on options, managing focus with arrow key navigation, ensuring only one option can be selected at a time unless aria-multiselectable="true" is set, and making the container accessible to screen readers with appropriate ARIA labels.