HTML无序列表中添加语义正确且可访问的分隔符的正确方法

你提到的第三种方案<li role="separator"></li>是目前兼顾语义规范、可访问性的最优实现方式，原因如下：

• 完全符合HTML规范要求：li元素允许设置separator角色用作列表内的主题分隔
• 不会触发列表计数错误：辅助技术会自动忽略角色为separator的列表项，不会将其计入列表总项数，你提到的7个有效项的场景下仍会被正确识别为7项
• 可访问性表现达标：主流屏幕阅读器（NVDA、VoiceOver、JAWS等）均能正确识别该角色，会向用户播报分隔符提示，清晰传达前后列表项属于不同主题分组的语义

如果需要同时展示可视分隔线，也可以直接将hr放在该列表项内，不会影响效果：

<li role="separator"><hr></li>

额外可选方案 #

如果你的列表分组有明确的主题名称，更建议用带语义标识的多列表实现，可访问性更强：

<h3 id="group1">第一类主题</h3>
<ul aria-labelledby="group1">
  <li>These</li>
  <li>Items</li>
  <li>Are of</li>
  <li>One kind</li>
</ul>

<h3 id="group2">第二类主题</h3>
<ul aria-labelledby="group2">
  <li>But these</li>
  <li>Are of</li>
  <li>Another kind</li>
</ul>

这种实现不需要额外的分隔符角色，分组语义更明确，也完全符合规范要求。

内容的提问来源于stack exchange，提问作者Rúnar Berg