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

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

The `list` role allows only `listitem` children, so an element with `role="group"` can't sit directly inside an element with `role="list"`.

Screen readers announce a list with the number of items it holds and let users jump from one item to the next. A `group` in that position isn't a list item, so what the list announces no longer matches what's inside it. `<ul>` and `<ol>` have an implicit `list` role, so the same rule applies to them.

The validator checks children in the accessibility tree, not in the DOM. It looks past wrappers that have no role, so a plain `<div>` between the list and the group doesn't help. An element with `role="listitem"` between them does.

Carousels are the usual source. Some slider scripts give the slide track `role="list"` and each slide `role="group"` with `aria-roledescription="slide"`, mixing two patterns. The carousel pattern in the ARIA Authoring Practices Guide uses `group` slides inside a container that isn't a list.

## Invalid example

```html
<section aria-roledescription="carousel" aria-label="Featured stories">
  <div class="carousel-track" role="list">
    <div role="group" aria-roledescription="slide" aria-label="1 of 2">
      <img src="spring.jpg" alt="Spring collection">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 of 2">
      <img src="summer.jpg" alt="Summer collection">
    </div>
  </div>
</section>
```

## Valid example

Remove `role="list"` from the track and keep the slides as groups:

```html
<section aria-roledescription="carousel" aria-label="Featured stories">
  <div class="carousel-track">
    <div role="group" aria-roledescription="slide" aria-label="1 of 2">
      <img src="spring.jpg" alt="Spring collection">
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 of 2">
      <img src="summer.jpg" alt="Summer collection">
    </div>
  </div>
</section>
```

If the slides should be announced as a list, make them list items instead of groups:

```html
<section aria-roledescription="carousel" aria-label="Featured stories">
  <ul class="carousel-track">
    <li aria-roledescription="slide" aria-label="1 of 2">
      <img src="spring.jpg" alt="Spring collection">
    </li>
    <li aria-roledescription="slide" aria-label="2 of 2">
      <img src="summer.jpg" alt="Summer collection">
    </li>
  </ul>
</section>
```