A listbox that contains a group of options is missing an accessible name
| Field | Value |
|---|---|
| Rule code | Manual_OptionGroup_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 1.3.1 Info and Relationships |
| Must be fixed at source | No |
Description
When a listbox contains grouped options, they are often referred to as an "option group." An "option group" must include at least one option and requires an accessible name, provided via an aria-label or aria-labelledby attribute. Without an accessible name, the grouping of options may be unclear to users utilizing screen readers.
How to fix
Ensure that each container representing a group of options has an accessible name provided via an aria-label or aria-labelledby attribute. When using the aria-label attribute, a descriptive string is sufficient (e.g. aria-label="Color Options"). When using the aria-labelledby attribute, reference the id of a text element (e.g. <span id="color_options902">Color Options</span>). The aria-labelledby attribute should then reference this id (e.g. aria-labelledby="color_options902"), ensuring the group name is properly conveyed to assistive technologies.