WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Roles for nest lists

for

From: Léonie Watson
Date: Dec 11, 2015 11:41AM

> From: WebAIM-Forum On Behalf Of Greg Gamble
> Sent: 11 December 2015 18:36
>
> I have a nested list ... is it given the same roles as the parent?

It is, but you don't need to use the roles if you're using the HTML ul/li elements.

<ul>
<li>Fruit
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul></li>
<li>Vegetables</li>
</ul>

Or

<div role="list">
<span role="listitem">Fruit>
<div role="list">
<span role="listitem">Apples</span>
<span role="listitem">Bananas</span>
</div></span>
<span role="listitem">Vegetables</span>
</div>


Note: The use of div and span in the second example is arbitrary. You could use all spans or all divs for example.


Léonie.

--
@LeonieWatson tink.uk Carpe diem