# An element with “role=group” must not be a descendant of an element with “role=list”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-element-with-role-group-must-not-be-a-descendant-of-an-element-with-role-list
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An element with `role="group"` cannot be nested inside an element with `role="list"` because the WAI-ARIA specification restricts which roles are allowed as children of a `list`.

The `list` role expects its direct children to have the `listitem` role. According to the ARIA specification, `group` is not a permitted child role of `list`. When a screen reader encounters a `list`, it announces the number of items and allows users to navigate between them. Inserting a `group` inside the `list` breaks that expected structure, which can confuse assistive technologies.

This issue commonly appears when wrapping a subset of `<li>` elements in a `<div>` with `role="group"` inside a `<ul>` or `<ol>`. Since `<ul>` and `<ol>` have an implicit `role="list"`, the validator flags the violation.

If you need to visually or semantically group items within a list, you have a few options. You can use a nested list inside a `<li>`, which is valid HTML and produces a proper ARIA tree. Alternatively, if the grouping is purely visual, use CSS instead of a wrapper element.

## Example with the issue

```html
<ul>
  <li>Apple</li>
  <div role="group" aria-label="Citrus fruits">
    <li>Orange</li>
    <li>Lemon</li>
  </div>
</ul>
```

This triggers the validation error because the `div` with `role="group"` is a descendant of the `<ul>` (which has an implicit `role="list"`). It also has a second problem: a `<div>` is not a valid direct child of `<ul>`.

## Fixed example using a nested list

```html
<ul>
  <li>Apple</li>
  <li>
    Citrus fruits
    <ul>
      <li>Orange</li>
      <li>Lemon</li>
    </ul>
  </li>
</ul>
```

The nested `<ul>` inside a `<li>` is valid HTML. Screen readers handle nested lists well, announcing the sublist and its item count separately.

## Fixed example using separate lists

If a nested list does not fit your design, split the content into separate lists with headings:

```html
<h3>All fruits</h3>
<ul>
  <li>Apple</li>
</ul>

<h3>Citrus fruits</h3>
<ul>
  <li>Orange</li>
  <li>Lemon</li>
</ul>
```

This avoids nesting issues entirely and gives each group a clear label.