An option roled element within a listbox is missing a required state

An option roled element within a listbox is missing a required state — rule summary

Field	Value
Rule code	Manual_Option_State_Missing
WCAG conformance level	A
WCAG success criterion	4.1.2 Name, Role, Value
Must be fixed at source	No

Description

Listbox elements present a list of options and allow users to select one or more. We detected a listbox missing the required aria-selected state. When using the ARIA listbox role, at least one child option element must have aria-selected set to true or false. Without this accessible state, screen readers may struggle to convey which options are active or inactive.

How to fix

A listbox element with the listbox role requires all descendant option elements to include the aria-selected attribute. Ensure that at least one option has aria-selected set to true or false, indicating whether it is selected.

Example:

<div id="listLabel">Choose an Option</div>
<select role="listbox" aria-labelledby="listLabel">
  <option value="1" aria-selected="true">Option 1</option>
  <option value="2">Option 2</option>
</select>