应优先使用语义化 而非 role="separator"，因 本身具有明确分隔语义且被屏幕阅读器正确识别；role="separator" 仅适用于无语义元素（如 或 ）需补充分隔意图的特定场景。
用 role="separator" 替代 <hr> 并不能提升语义，反而可能削弱可访问性。
hr 标签本身就有明确的语义
<hr> 是 HTML5 中定义的**语义化分隔符元素**，表示主题或内容的分界，浏览器和屏幕阅读器（如 NVDA、VoiceOver）会将其识别为“separator”角色，并朗读为“分隔线”或“水平线”。它不需要额外添加 role 属性——加了反而属于冗余甚至错误覆盖。
role="separator" 有严格使用前提
该 ARIA role 仅适用于**非语义化容器中需要表达分隔意图的元素**，例如：
- 一个
<div> 或 <code><span></span>被用作视觉分隔线，但原生无语义 - 该元素不承载文字内容，也不参与焦点流（通常设
tabindex="-1"） - 必须配合
aria-orientation（如aria-orientation="horizontal"）以明确方向
错误示例：用 div + role="separator" 替换 hr
以下写法是反模式：
它绕过了原生语义，增加了维护成本，且在部分旧辅助技术中兼容性不如 <hr>。W3C 明确建议：**优先使用语义化 HTML 元素，而非用 ARIA 模拟它们**。
真正需要 role="separator" 的场景
比如在自定义菜单组件中，两个菜单项之间插入一条视觉分隔线：
此时 <li> 本无分隔语义，用 ARIA 补充是合理且必要的——这和替换 <hr> 是完全不同的问题域。
