An HTML Element with listbox functionality is missing a multiselect attribute
| Field | Value |
|---|---|
| Rule code | Manual_Listbox_Multiselect_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. We detected a listbox where more than one option can be selected at once. When listboxes are multiselectable, they require the multiselect aria attribute. Without the multiselect attribute, a user may not know that multiple options are selectable and 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. It is important to verify whether or not more than one option is selectable. If more than one option can be selected by the user, include the attribute "aria-multiselectable" and set it to true on the listbox element. All options within the listboxes should have "aria-selected" attributes that update to true or false based on their selection state. Options which are not selectable should not have the aria-selected attribute.