非<li>直接后代的嵌套列表是否为合法HTML？无障碍性如何？

一、是否属于嵌套列表范畴？ #

严格来说，标准结构化嵌套列表要求<ul>/<ol>直接作为<li>的子元素，但你这种结构里的内部徽章列表，虽然被<div class="card-container">包裹、不是<li>的直接后代，但从内容关联上，它属于父列表项（卡片）的组成部分，属于语义层面的嵌套列表——只是结构上多了一层布局容器。

二、是否为合法的HTML结构？ #

完全合法。HTML规范并没有限制列表必须直接嵌套在<li>内部，<li>作为块级容器，可以包含任意合法的块级/行内元素，只要标签闭合正确、层级关系清晰，这种结构能通过W3C的HTML验证。你提供的示例代码完全符合规范要求。

三、无障碍访问的影响 #

你的VoiceOver测试结果符合预期是正常的，这类结构在无障碍访问上的表现整体稳定，但有几个细节需要注意：

• 主流屏幕阅读器（VoiceOver、NVDA、JAWS）都会遍历DOM树识别列表语义，不会因为中间有<div>容器就忽略内部的<ul>/<li>，用户能听到类似“列表，3项”的提示，也可以通过列表导航快捷键访问内部列表项。
• 建议给内部的徽章列表添加aria-label属性，比如<ul class="badge-list" aria-label="该卡片的标签">，帮助屏幕阅读器用户快速理解这个列表的用途，尤其是当卡片包含较多内容时，能减少认知负担。
• 避免用<div>模拟列表结构，你现在用真实的<ul>和<li>是正确的，这是保证无障碍语义的基础。
• 可以多测试几款屏幕阅读器，不同工具的细节处理可能略有差异，但核心的语义识别不会有问题。

你的卡片列表场景里，这种结构是合理的——布局容器<div class="card-container">是为了实现卡片的样式和排版需求，内部的徽章列表作为卡片内容的一部分，语义上完全通顺，不会对无障碍访问造成实质性障碍。

你的示例代码： #

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

内容的提问来源于stack exchange，提问作者Mark