带非列表项交互式分隔块的有序手风琴列表无障碍问题问询

核心问题根源 #

有序列表<ol>的原生语义是仅包含连续的列表项<li>，任何直接嵌套在<ol>内的非<li>元素，都会被VoiceOver等屏幕阅读器误判为列表项——这就是你的列表被识别为4项的根本原因。ARIA角色（如region、separator）无法完全覆盖浏览器对<ol>的原生语义解析，因为屏幕阅读器优先遵循原生HTML结构的语义逻辑。

最优语义化实现方案（推荐） #

重构DOM结构，将交互式分隔块移出<ol>，让<ol>仅保留真正的列表项。通过<ol>的start属性保证视觉上的序号连续性：

<div class="accordion-wrapper">
  <!-- 前2个列表项 -->
  <ol>
    <li>
      <!-- 手风琴问题1内容 -->
    </li>
    <li>
      <!-- 手风琴问题2内容 -->
    </li>
  </ol>

  <!-- 独立的交互式分隔块 -->
  <div class="interactive-divider" role="region" aria-label="额外交互式模块">
    <!-- 你的交互式内容（按钮、表单等） -->
  </div>

  <!-- 第3个列表项，用start属性保持序号从3开始 -->
  <ol start="3">
    <li>
      <!-- 手风琴问题3内容 -->
    </li>
  </ol>
</div>

为什么这有效？ #

• 两个<ol>的语义纯粹，VoiceOver会正确识别为“2项列表”和“1项列表”，结合视觉上的连续序号，用户体验不受影响。
• 分隔块作为独立的region，会被屏幕阅读器单独宣布为一个可聚焦的区域，不会混入列表项计数。

兼容现有DOM的临时修复方案 #

如果无法大幅重构现有代码，可以将分隔块包裹在一个<li>中，同时给这个<li>添加role="none"（或role="presentation"），让屏幕阅读器忽略它的列表项语义：

<ol>
  <li>手风琴问题1内容</li>
  <li>手风琴问题2内容</li>
  <!-- 用li包裹分隔块，并用role="none"消除列表项语义 -->
  <li role="none">
    <div class="interactive-divider" role="region" aria-label="交互式分隔内容">
      <!-- 交互式内容 -->
    </div>
  </li>
  <li>手风琴问题3内容</li>
</ol>

注意事项 #

• role="none"会让屏幕阅读器完全忽略该<li>的列表项身份，但不会影响内部内容的无障碍性。
• 仍需给分隔块添加aria-label或aria-labelledby，明确描述其用途，确保用户理解这是一个独立的交互式模块。

额外测试要点 #

• 使用VoiceOver导航时，确认列表被正确识别为3项（两个<ol>的情况下会分别宣布，但视觉序号连续），分隔块被单独识别为区域。
• 确保分隔块内的交互式元素（如按钮、链接）本身具备无障碍性：按钮要有清晰的文本或aria-label，链接目标明确。

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