htmlaccessibilityscreen-readers

Can you have a nested list that's not a direct descendent of an li


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>

Solution

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