HTML Guides for listbox

An <li> element inside an element with role="listbox" may only carry a role value of option or group.

The listbox role turns a list into a select-like widget, so assistive technologies expect every item in it to be a selectable option, optionally organized under a group. Any other role on the items, such as menuitem, button, or tab, contradicts the structure announced by the container, and screen readers can no longer present the widget coherently. This often happens in hand-rolled dropdowns built on <ul> and <li>, where the container got role="listbox" but the items kept a role from an earlier design.

If the items really are selectable choices, give them role="option". If they are something else entirely, change the container role instead of forcing the items. And when the widget is a plain single or multiple choice, a native <select> needs no ARIA at all.

Invalid example

The items use menuitem, which is not allowed inside a listbox:

<ulrole="listbox"aria-label="Sort order">

<lirole="menuitem">Newest first</li>

<lirole="menuitem">Oldest first</li>

</ul>

Valid example

Each item becomes an option:

<ulrole="listbox"aria-label="Sort order">

<lirole="option"aria-selected="true">Newest first</li>

<lirole="option"aria-selected="false">Oldest first</li>

</ul>

Or use a native control and drop the ARIA roles entirely:

<label>Sort order

<select>

<optionselected>Newest first</option>

<option>Oldest first</option>

</select>

</label>

The listbox role is the implicit ARIA role for a <select> element only when it has a multiple attribute or a size attribute greater than 1. A standard single-selection <select> (dropdown) has an implicit role of combobox, so explicitly assigning role="listbox" to it creates a conflict.

When a <select> element has no multiple attribute and no size greater than 1, browsers render it as a collapsed dropdown — a combobox. The listbox role describes a widget where all options are persistently visible, which matches the behavior of a multi-select or a select with a visible size greater than 1. Applying role="listbox" to a standard dropdown misrepresents the control to assistive technologies.

You have a few options to fix this: remove the role="listbox" entirely (since the browser already assigns the correct implicit role), add the multiple attribute, or set size to a value greater than 1.

Incorrect Example

<selectrole="listbox"name="color">

<optionvalue="red">Red</option>

<optionvalue="blue">Blue</option>

<optionvalue="green">Green</option>

</select>

Fixed Examples

Remove the explicit role and let the browser handle it:

<selectname="color">

<optionvalue="red">Red</option>

<optionvalue="blue">Blue</option>

<optionvalue="green">Green</option>

</select>

Or, if you genuinely need role="listbox", use multiple or size greater than 1:

<selectrole="listbox"name="color"multiple>

<optionvalue="red">Red</option>

<optionvalue="blue">Blue</option>

<optionvalue="green">Green</option>

</select>

<selectrole="listbox"name="color"size="3">

<optionvalue="red">Red</option>

<optionvalue="blue">Blue</option>

<optionvalue="green">Green</option>

</select>

In most cases, simply removing role="listbox" is the best fix. The implicit ARIA roles already convey the correct semantics to assistive technologies without any extra attributes.