We detected an element that functions as an option but is missing the option role

We detected an element that functions as an option but is missing the option role — rule summary

Field	Value
Rule code	Manual_Option_Role_Missing
WCAG conformance level	A
WCAG success criterion	2.4.2 Page Titled
Must be fixed at source	No

Description

When creating custom listboxes or dropdown menus, each selectable item must have a role of option applied, this ensures that screen readers are able to identify it as a selectable option. Without the role of option, assistive technologies cannot determine the functionality of the element.

How to fix

Apply role="option" to all selectable items within a listbox:

<ul id="my-listbox" role="listbox" aria-label="Choose an option">
  <li role="option" id="option-1">First option</li>
  <li role="option" id="option-2">Second option</li>
  <li role="option" id="option-3">Third option</li>
</ul>

Each option should also have these attributes when appropriate:

• aria-selected="true" for the currently selected option
• tabindex="-1" on all options except the focused one
• id attributes for each option to support programmatic selection

When an option is selected, ensure that the selection is reflected in its attributes (aria-selected should change to aria-selected=true or false).