The title explains it all. I am curious if this is considered a nested list and if so is it valid HTML. I am also curious about any accessibility implications. I tested with VoiceOver and it seems to read it as I would expect, but looking for any insight.
Let's say that I have an application that has a list of cards and for each card I have a list of badges.
example:
<ol>
<li class="card">
<div class="card-container">
<h2>some title</h2>
<ul class="badge-list">
<li class="badge">some name</li>
<li class="badge">another name</li>
<li class="badge">another another name</li>
</ul>
</div>
</li>
<li class="card">
<div class="card-container">
<h2>some title</h2>
<ul class="badge-list">
<li class="badge">some name</li>
<li class="badge">another name</li>
<li class="badge">another another name</li>
</ul>
</div>
</li>
<li class="card">
<div class="card-container">
<h2>some title</h2>
<ul class="badge-list">
<li class="badge">some name</li>
<li class="badge">another name</li>
<li class="badge">another another name</li>
</ul>
</div>
</li>
</ol>
It's perfectly valid HTML code and screen readers correctly indicate the list and nested lists without any problem.
However, it's legitimate to ask yourself either the outer <ol>
is really necessary, and if it wouldn't be too complicated semantics for nothing.
At least from my screen reader user point of view, this outer <ol>
doesn't bring much usefulness, as there are already <h2>
headings to clearly separate the different parts and allowing quick navigation.
Although you can put entire blocks in <li>
, there are often better ways if items are longer or more complex than just a simple paragraph of text and/or simple elements such as links.
In your case, using <section>
instead would make it simpler, and even clearer.