HTML Guides for carousel

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

<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:

<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:

<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>