In each form, are items of the same nature in a selection list grouped in a relevant way?

A screen reader user navigates through a <select> with 40 options by pressing arrow keys. If these options mix continents, countries, and territories without any grouping, the user has no way to orient themselves. They browse through everything, linearly.

This criterion imposes a clear rule: when options in a <select> belong to distinct families, you group them using <optgroup> elements. Each group must have a label attribute naming the category meaningfully. A label="Group 1" is no better than having no group at all.

The screen reader announces the group name before listing its options. The user immediately knows which section they are in and can decide to skip it or explore it. Three tests chain this verification: are items grouped? Do groups have a label? Is that label meaningful?

3 tests to check the coherent grouping of options in choice lists

Grouping of <option> of same nature in <optgroup>

  1. Identify all <select> elements on the page.
  2. For each <select>, ask yourself whether the options can be grouped by nature (examples: fruits and vegetables, countries by continent, file formats by type).
  3. If yes, verify that these groups are materialized with <optgroup> elements in the source code.
  4. If all relevant <select> elements use <optgroup>, the test is validated. A single missing natural group is enough to fail the test.

Presence of label attribute on each <optgroup>

  1. Identify all <select> elements that contain at least one <optgroup>.
  2. For each <optgroup> found, inspect the source code: is the label attribute present?
  3. If all <optgroup> elements have a label attribute, the test is validated. A single <optgroup> without a label is enough to fail the test.

Relevance of label on each <optgroup>

  1. Identify all <optgroup> elements that have a label attribute.
  2. For each label, assess its relevance: does it clearly describe the category of options it groups?
  3. An empty, generic ("Group 1", "Miscellaneous" without explanatory context), or misleading label fails the test.
  4. If all label values are meaningful, the test is validated.

Examples

❌ Non-compliant : Selection list without grouping

<label for="animal">Choose an animal</label>
<select id="animal" name="animal">
  <option value="">-- Select --</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="rabbit">Rabbit</option>
  <option value="parrot">Parrot</option>
  <option value="canary">Canary</option>
  <option value="turtle">Turtle</option>
  <option value="snake">Snake</option>
</select>

The options mix mammals, birds, and reptiles without distinction. A screen reader user hears all eight options in a row without knowing which family each animal belongs to. Navigation is slower and orientation is impossible.

✅ Compliant : Selection list with meaningful grouping

<label for="animal">Choose an animal</label>
<select id="animal" name="animal">
  <option value="">-- Select --</option>
  <optgroup label="Mammals">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="rabbit">Rabbit</option>
  </optgroup>
  <optgroup label="Birds">
    <option value="parrot">Parrot</option>
    <option value="canary">Canary</option>
  </optgroup>
  <optgroup label="Reptiles">
    <option value="turtle">Turtle</option>
    <option value="snake">Snake</option>
  </optgroup>
</select>

The screen reader announces "Mammals" before listing Cat, Dog, and Rabbit, then "Birds" before Parrot and Canary. The user immediately understands the structure and can navigate by category. Sighted users also see the group labels displayed visually by the browser without additional CSS.

❌ Non-compliant : Group with non-meaningful label

<label for="country">Select a country</label>
<select id="country" name="country">
  <optgroup label="Group 1">
    <option value="fr">France</option>
    <option value="be">Belgium</option>
    <option value="ch">Switzerland</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="de">Germany</option>
    <option value="at">Austria</option>
  </optgroup>
</select>

The label attribute is present, but "Group 1" and "Group 2" convey no information. The screen reader announces these meaningless titles. Meaningful labels would have been "French-speaking countries" and "German-speaking countries". This case fails test 11.8.3.

Tips and pitfalls

⚠️ An <optgroup> without a label is worse than no <optgroup> at all

An <optgroup> lacking a label attribute fails test 11.8.2, but the consequences go further: some screen readers announce an empty string before each group, others silently ignore the grouping. The result varies depending on the browser and AT combination. Always specify label.

⚠️ Believing that a small <select> does not need grouping

This is not a matter of size. An 8-option <select> mixing units of measurement (length, mass, volume) requires <optgroup> elements. A 30-option <select> with all options from the same nature, like 30 countries from the same region, does not need them. The key is the heterogeneity of options, not their quantity.

💡 The <optgroup> is a header, not a selectable option

The title of an <optgroup> cannot be selected by the user. This is native browser behavior, requiring no JavaScript. If you need a neutral option at the beginning of the list, add a placeholder <option> (<option value="">-- Select --</option>) before the first <optgroup>.

⚠️ It is impossible to nest <optgroup> elements

The HTML specification does not allow nested <optgroup> elements. If your list has subcategories, you must flatten them or reconsider the interaction. A common solution: prefix sub-level options with a dash (– Suboption). For deep hierarchies, switch to a custom component with role="listbox" and role="group".

⚠️ No grouping required if all options are of the same nature

If your <select> lists 20 languages, 50 cities in the same country, or 12 months of the year, there are no groups of different natures to form. Criterion 11.8 does not apply. The obligation to group appears only when distinct and nameable categories coexist in the list.

Frequently asked questions

How do you determine if options in a <select> form groups of the same nature according to RGAA?

Ask yourself: if you had to sort these options into labeled boxes, how many distinct boxes would you have? Once the answer exceeds 1 and these boxes have obvious names (domestic and farm animals, European and Asian countries, audio and video formats), the use of <optgroup> is required by criterion 11.8.

How is the label of an <optgroup> displayed visually in browsers for RGAA?

Yes. Browsers display the label of an <optgroup> as a visual header in the dropdown list, typically in bold and non-clickable. This rendering benefits both sighted users and screen reader users alike. It is native browser behavior, requiring no CSS or JavaScript.

How do you audit RGAA criterion 11.8 on choice lists in practice?

Two complementary approaches. In code inspection: search for <select> elements in the DOM, verify the presence of <optgroup> and the relevance of their label attributes. With a screen reader: navigate to the <select>, open it, and verify that each group name is announced before its options. With NVDA and Firefox, the group name is read when entering each section.

In which cases does a vague <optgroup> label like "Other" comply with RGAA?

It depends. "Other" is acceptable if the category properly groups residual elements clearly distinct from other groups and the term is understandable in context. However, if it is the only group in the list or its content can be described more specifically, test 11.8.3 fails. The rule: the label must allow the user to predict what they will find in the group.

How does RGAA criterion 11.8 apply to custom dropdown lists in JavaScript?

Yes. If you replace a native <select> with a custom component using role="listbox", option groups must be materialized by elements with role="group" and a meaningful aria-label. This replicates the semantics of the native <optgroup>. The obligation of meaningful group naming remains identical.

References

RGAA 4.1.2: Criterion 11.8
WCAG 2.1:1.3.1 (A)H851.3.1 (A)